NAMSEE - Official Website | $NAM<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Knewave&family=Schoolbell&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* ==========================================\r\n 1. RESET & FULL BG STYLES\r\n ========================================== *\/\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html, body {\r\n width: 100%;\r\n min-height: 100vh;\r\n }\r\n\r\n body {\r\n \/* Wallpaper Full Screen *\/\r\n background-image: url('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/HERO1.jpg');\r\n background-size: cover;\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n background-attachment: fixed;\r\n color: #2b2b2b;\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n font-size: 18px;\r\n line-height: 1.4;\r\n overflow-x: hidden;\r\n position: relative;\r\n }\r\n\r\n h1, h2, h3 {\r\n font-family: 'Knewave', cursive, sans-serif;\r\n font-weight: normal;\r\n letter-spacing: 1px;\r\n color: #1a1a1a;\r\n text-transform: uppercase;\r\n }\r\n\r\n p, span, button, a {\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n font-weight: 300;\r\n }\r\n\r\n a {\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n \/* Outer Container *\/\r\n .namsee-wrapper {\r\n width: 100%;\r\n max-width: 1150px;\r\n margin: 0 auto;\r\n padding: 15px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* ==========================================\r\n 2. HEADER NAV MENU (TOP FLOATING BAR)\r\n ========================================== *\/\r\n .top-navbar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(255, 255, 255, 0.65);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border: 3.5px solid #1a1a1a;\r\n border-radius: 50px;\r\n padding: 8px 22px;\r\n box-shadow: 0px 4px 0px #1a1a1a;\r\n width: 100%;\r\n z-index: 100;\r\n }\r\n\r\n .brand-logo-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .brand-logo {\r\n font-family: 'Knewave', cursive;\r\n font-size: 1.8rem;\r\n color: #ff4d6d;\r\n text-shadow: 2px 2px 0px #1a1a1a;\r\n }\r\n\r\n .official-badge {\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 10px;\r\n padding: 2px 8px;\r\n border: 1.5px solid #1a1a1a;\r\n border-radius: 12px;\r\n box-shadow: 1px 1px 0px #1a1a1a;\r\n text-transform: uppercase;\r\n }\r\n\r\n .nav-menu {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .nav-btn {\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 15px;\r\n padding: 6px 16px;\r\n border: 2.5px solid #1a1a1a;\r\n border-radius: 20px;\r\n box-shadow: 2px 3px 0px #1a1a1a;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .nav-btn:hover {\r\n transform: translateY(-2px) scale(1.05);\r\n box-shadow: 4px 5px 0px #1a1a1a;\r\n background: #ff9f1c;\r\n }\r\n\r\n .nav-btn:active {\r\n transform: translateY(1px);\r\n box-shadow: 1px 1px 0px #1a1a1a;\r\n }\r\n\r\n \/* Spacer Tengah *\/\r\n .hero-spacer {\r\n flex-grow: 1;\r\n min-height: 100px;\r\n }\r\n\r\n \/* ==========================================\r\n 3. ANIMATED & PLAYFUL HERO LAYOUT\r\n ========================================== *\/\r\n .hero-bottom-container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n gap: 20px;\r\n width: 100%;\r\n margin-bottom: 10px;\r\n }\r\n\r\n \/* Keyframe Floating Smooth Movement *\/\r\n @keyframes floatLeft {\r\n 0% { transform: translateY(0px) rotate(-1.5deg); }\r\n 50% { transform: translateY(-10px) rotate(-0.5deg); }\r\n 100% { transform: translateY(0px) rotate(-1.5deg); }\r\n }\r\n\r\n @keyframes floatRight {\r\n 0% { transform: translateY(0px) rotate(2deg); }\r\n 50% { transform: translateY(-12px) rotate(0.8deg); }\r\n 100% { transform: translateY(0px) rotate(2deg); }\r\n }\r\n\r\n \/* Left Banner (Title, Ticker, & CTAs) *\/\r\n .hero-left {\r\n max-width: 420px;\r\n width: 100%;\r\n background: rgba(255, 253, 245, 0.92);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n border: 3.5px solid #1a1a1a;\r\n border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px; \/* Doodle Organic Border *\/\r\n padding: 22px;\r\n box-shadow: 6px 7px 0px #1a1a1a;\r\n animation: floatLeft 6s ease-in-out infinite;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .hero-left:hover {\r\n animation-play-state: paused;\r\n transform: translateY(-6px) rotate(0deg) scale(1.02);\r\n box-shadow: 8px 10px 0px #1a1a1a;\r\n }\r\n\r\n .hero-left h1 {\r\n font-size: 2.8rem;\r\n color: #ff4d6d;\r\n text-shadow: 3px 3px 0px #1a1a1a;\r\n line-height: 0.9;\r\n margin-bottom: 2px;\r\n }\r\n\r\n .hero-left .ticker {\r\n font-size: 1.6rem;\r\n color: #ffb703;\r\n text-shadow: 2px 2px 0px #1a1a1a;\r\n display: block;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .hero-left p.subtitle {\r\n font-size: 1.1rem;\r\n color: #1a1a1a;\r\n margin-bottom: 15px;\r\n font-weight: bold;\r\n }\r\n\r\n \/* Right Banner (Doodle Note & Quote) *\/\r\n .hero-right {\r\n max-width: 350px;\r\n width: 100%;\r\n background: rgba(255, 240, 243, 0.94);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n border: 3.5px solid #1a1a1a;\r\n border-radius: 15px 255px 15px 225px\/225px 15px 255px 15px; \/* Doodle Organic Border Opposite *\/\r\n padding: 20px;\r\n box-shadow: 6px 7px 0px #1a1a1a;\r\n animation: floatRight 7s ease-in-out infinite 0.5s;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .hero-right:hover {\r\n animation-play-state: paused;\r\n transform: translateY(-6px) rotate(0deg) scale(1.02);\r\n box-shadow: 8px 10px 0px #1a1a1a;\r\n }\r\n\r\n .sticker-badge {\r\n display: inline-block;\r\n background: #4cc9f0;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 12px;\r\n padding: 4px 12px;\r\n border: 2px solid #1a1a1a;\r\n border-radius: 50px;\r\n box-shadow: 2px 2px 0px #1a1a1a;\r\n margin-bottom: 10px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .hero-right p.quote-text {\r\n font-size: 1.05rem;\r\n color: #1a1a1a;\r\n line-height: 1.35;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .hero-right span.author {\r\n display: block;\r\n font-family: 'Knewave', cursive;\r\n font-size: 0.95rem;\r\n color: #ff006e;\r\n text-align: right;\r\n }\r\n\r\n \/* CTA Buttons *\/\r\n .cta-group {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .doodle-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 14px;\r\n padding: 8px 16px;\r\n border: 2.5px solid #1a1a1a;\r\n border-radius: 18px;\r\n box-shadow: 3px 3px 0px #1a1a1a;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n text-align: center;\r\n }\r\n\r\n .doodle-btn:hover {\r\n background: #ff9f1c;\r\n transform: translateY(-2px) scale(1.03);\r\n box-shadow: 4px 5px 0px #1a1a1a;\r\n }\r\n\r\n .btn-purple { background: #b5179e; color: #fff; }\r\n .btn-purple:hover { background: #7209b7; }\r\n .btn-blue { background: #4cc9f0; color: #1a1a1a; }\r\n .btn-blue:hover { background: #4895ef; }\r\n\r\n \/* ==========================================\r\n 4. POP-UP MODALS (CENTERED SYSTEM)\r\n ========================================== *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.6);\r\n backdrop-filter: blur(6px);\r\n -webkit-backdrop-filter: blur(6px);\r\n z-index: 9999;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n padding: 20px;\r\n }\r\n\r\n .modal-overlay.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .modal-content {\r\n background: #fffdf5;\r\n border: 4px solid #1a1a1a;\r\n border-radius: 25px;\r\n width: 100%;\r\n max-width: 800px;\r\n max-height: 85vh;\r\n overflow-y: auto;\r\n padding: 30px 20px 20px 20px;\r\n box-shadow: 6px 8px 0px #1a1a1a;\r\n transform: scale(0.85);\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n position: relative;\r\n }\r\n\r\n .modal-overlay.active .modal-content {\r\n transform: scale(1);\r\n }\r\n\r\n .close-btn {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: #ff4d6d;\r\n color: #fff;\r\n border: 3px solid #1a1a1a;\r\n border-radius: 50%;\r\n width: 36px;\r\n height: 36px;\r\n font-family: 'Knewave', cursive;\r\n font-size: 16px;\r\n cursor: pointer;\r\n box-shadow: 2px 2px 0px #1a1a1a;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10;\r\n }\r\n\r\n .close-btn:hover {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* ==========================================\r\n 5. MODAL CONTENT INTERNAL STYLES\r\n ========================================== *\/\r\n \/* About Inner *\/\r\n .about-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n align-items: center;\r\n }\r\n .about-text h2 { font-size: 2rem; color: #2a9d8f; margin-bottom: 10px; text-shadow: 2px 2px 0px #1a1a1a; }\r\n .about-text p { font-size: 1.15rem; margin-bottom: 10px; }\r\n .about-image {\r\n border: 3.5px solid #1a1a1a;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 4px 4px 0px #1a1a1a;\r\n background: #fff;\r\n }\r\n .about-image img { width: 100%; height: auto; display: block; }\r\n\r\n \/* Gallery Inner & Video Click Preview *\/\r\n .gallery-header h2 { text-align: center; font-size: 2.2rem; color: #ff70a6; text-shadow: 2px 2px 0px #1a1a1a; margin-bottom: 5px; }\r\n .gallery-header p { text-align: center; font-size: 1rem; color: #666; margin-bottom: 15px; }\r\n .gallery-main-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 15px; }\r\n \r\n .gallery-card { \r\n background: #fff; \r\n padding: 10px; \r\n border: 3px solid #1a1a1a; \r\n border-radius: 14px; \r\n text-align: center; \r\n box-shadow: 3px 3px 0px #1a1a1a;\r\n cursor: pointer;\r\n transition: transform 0.2s ease;\r\n }\r\n .gallery-card:hover { transform: translateY(-3px) scale(1.02); }\r\n .gallery-card:nth-child(1) { background: #e0aaff; }\r\n .gallery-card:nth-child(2) { background: #c8b6ff; }\r\n .gallery-card:nth-child(3) { background: #ffd6ff; }\r\n \r\n .video-box { \r\n border: 2px solid #1a1a1a; \r\n border-radius: 8px; \r\n overflow: hidden; \r\n margin-bottom: 6px; \r\n background: #000; \r\n position: relative;\r\n }\r\n .video-box video { width: 100%; height: 160px; object-fit: cover; display: block; pointer-events: none; }\r\n .click-hint {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n background: rgba(0,0,0,0.6);\r\n color: #fff;\r\n font-size: 10px;\r\n padding: 2px 8px;\r\n border-radius: 10px;\r\n font-family: 'Knewave', cursive;\r\n }\r\n .gallery-card p { font-size: 0.95rem; font-weight: bold; color: #1a1a1a; }\r\n \r\n .gallery-extra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }\r\n .mini-video-card { \r\n border: 2.5px solid #1a1a1a; \r\n border-radius: 10px; \r\n overflow: hidden; \r\n box-shadow: 2px 2px 0px #1a1a1a; \r\n background: #fff;\r\n cursor: pointer;\r\n transition: transform 0.2s ease;\r\n }\r\n .mini-video-card:hover { transform: translateY(-3px) scale(1.04); }\r\n .mini-video-card video { width: 100%; height: 110px; object-fit: cover; display: block; pointer-events: none; }\r\n\r\n \/* VIDEO PREVIEW LIGHTBOX *\/\r\n .lightbox-content {\r\n background: #fffdf5;\r\n border: 4px solid #1a1a1a;\r\n border-radius: 20px;\r\n padding: 20px;\r\n max-width: 650px;\r\n width: 100%;\r\n text-align: center;\r\n box-shadow: 6px 8px 0px #1a1a1a;\r\n position: relative;\r\n }\r\n .lightbox-video-wrapper {\r\n border: 3px solid #1a1a1a;\r\n border-radius: 14px;\r\n overflow: hidden;\r\n background: #000;\r\n margin-bottom: 12px;\r\n }\r\n .lightbox-video-wrapper video {\r\n width: 100%;\r\n max-height: 60vh;\r\n display: block;\r\n }\r\n .lightbox-caption {\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n color: #1a1a1a;\r\n }\r\n\r\n \/* Vibes Inner *\/\r\n .vibes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 15px; }\r\n .vibe-card { background: #ccff33; border: 3px solid #1a1a1a; border-radius: 16px; padding: 15px; text-align: center; box-shadow: 3px 3px 0px #1a1a1a; }\r\n .vibe-card h3 { font-size: 1.4rem; margin-bottom: 6px; color: #1a1a1a; }\r\n\r\n \/* Tokenomics Inner *\/\r\n .tok-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 15px 0; }\r\n .tok-box { background: #fff; border: 2.5px solid #1a1a1a; border-radius: 12px; padding: 12px; text-align: center; box-shadow: 3px 3px 0px #1a1a1a; }\r\n .tok-box strong { font-family: 'Knewave', cursive; font-size: 1.2rem; color: #ff006e; display: block; }\r\n\r\n \/* Community Inner *\/\r\n .social-box { text-align: center; padding: 15px 0; }\r\n .social-links { display: flex; gap: 12px; justify-content: center; margin-top: 15px; flex-wrap: wrap; }\r\n\r\n \/* ==========================================\r\n 6. MOBILE RESPONSIVE ADAPTATION\r\n ========================================== *\/\r\n @media (max-width: 768px) {\r\n .top-navbar {\r\n flex-direction: column;\r\n gap: 8px;\r\n border-radius: 20px;\r\n }\r\n .hero-bottom-container {\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n .hero-left, .hero-right {\r\n max-width: 100%;\r\n animation: none; \/* Nonaktifkan animasi bergelombang di layar HP agar tetap stabil *\/\r\n }\r\n .hero-left h1 { font-size: 2.2rem; }\r\n .hero-left .ticker { font-size: 1.3rem; }\r\n .about-grid { grid-template-columns: 1fr; }\r\n .gallery-main-grid { grid-template-columns: 1fr; }\r\n .cta-group { flex-direction: column; }\r\n .doodle-btn { width: 100%; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"namsee-wrapper\">\r\n\r\n \r\n <header class=\"top-navbar\">\r\n <div class=\"brand-logo-container\">\r\n <div class=\"brand-logo\">NAMSEE<\/div>\r\n <span class=\"official-badge\">Official<\/span>\r\n <\/div>\r\n <nav class=\"nav-menu\">\r\n <button class=\"nav-btn\" onclick=\"openModal('about-modal')\">About<\/button>\r\n <button class=\"nav-btn\" onclick=\"openModal('gallery-modal')\">Gallery<\/button>\r\n <button class=\"nav-btn\" onclick=\"openModal('vibes-modal')\">Core Vibes<\/button>\r\n <button class=\"nav-btn\" onclick=\"openModal('tokenomics-modal')\">Tokenomics<\/button>\r\n <button class=\"nav-btn\" onclick=\"openModal('community-modal')\">Community<\/button>\r\n <\/nav>\r\n <\/header>\r\n\r\n \r\n <div class=\"hero-spacer\"><\/div>\r\n\r\n \r\n <main class=\"hero-bottom-container\">\r\n \r\n \r\n <div class=\"hero-left\">\r\n <h1>NAMSEE<\/h1>\r\n <span class=\"ticker\">$NAM<\/span>\r\n <p class=\"subtitle\">Just Nam. Daily vibes, quiet moments, and simple days.<\/p>\r\n\r\n <div class=\"cta-group\">\r\n <a href=\"YOUR-LINK\" class=\"doodle-btn btn-purple\" target=\"_blank\">Buy $NAM<\/a>\r\n <a href=\"YOUR-LINK\" class=\"doodle-btn btn-blue\" target=\"_blank\">Join Community<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-right\">\r\n <span class=\"sticker-badge\">Daily Note \ud83d\udc3e<\/span>\r\n <p class=\"quote-text\">\"I eat, take naps, worry a little too much sometimes, and enjoy the little things. Hope these drawings make your day softer!\"<\/p>\r\n <span class=\"author\">\u2014 Nam<\/span>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n <\/div>\r\n\r\n \r\n\r\n \r\n <div id=\"about-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'about-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('about-modal')\">\u2715<\/button>\r\n <div class=\"about-grid\">\r\n <div class=\"about-text\">\r\n <h2>ABOUT $NAM<\/h2>\r\n <p>Hi, I'm Nam.<\/p>\r\n <p>I don't do anything extraordinary. I eat, take naps, worry a little too much sometimes, and enjoy the little things in life. These drawings are little pieces of my everyday life.<\/p>\r\n <p>$NAM is about bringing these simple moments into the crypto space\u2014making every day just a little softer.<\/p>\r\n <\/div>\r\n <div class=\"about-image\">\r\n <img decoding=\"async\" src=\"https:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/ASET-ABOUT.png\" alt=\"Nam About Asset\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"gallery-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'gallery-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('gallery-modal')\">\u2715<\/button>\r\n <div class=\"gallery-header\">\r\n <h2>GALLERY (Everyday Moments)<\/h2>\r\n <p>Click any video card for a full preview! \ud83c\udfac<\/p>\r\n <\/div>\r\n \r\n <div class=\"gallery-main-grid\">\r\n <div class=\"gallery-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-3.mp4', 'Ready for another simple day.')\">\r\n <div class=\"video-box\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-3.mp4\" type=\"video\/mp4\"><\/video>\r\n <span class=\"click-hint\">Zoom \ud83d\udd0d<\/span>\r\n <\/div>\r\n <p>\"Ready for another simple day.\"<\/p>\r\n <\/div>\r\n <div class=\"gallery-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-4.mp4', 'Taking a slow walk outside.')\">\r\n <div class=\"video-box\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-4.mp4\" type=\"video\/mp4\"><\/video>\r\n <span class=\"click-hint\">Zoom \ud83d\udd0d<\/span>\r\n <\/div>\r\n <p>\"Taking a slow walk outside.\"<\/p>\r\n <\/div>\r\n <div class=\"gallery-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-5.mp4', 'Naps, snacks, and zero rush.')\">\r\n <div class=\"video-box\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-5.mp4\" type=\"video\/mp4\"><\/video>\r\n <span class=\"click-hint\">Zoom \ud83d\udd0d<\/span>\r\n <\/div>\r\n <p>\"Naps, snacks, and zero rush.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-extra-grid\">\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-6.mp4', 'Daily Nam Moments #6')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-6.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-7.mp4', 'Daily Nam Moments #7')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-7.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-8.mp4', 'Daily Nam Moments #8')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-8.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-9.mp4', 'Daily Nam Moments #9')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-9.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-10.mp4', 'Daily Nam Moments #10')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-10.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"vibes-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'vibes-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('vibes-modal')\">\u2715<\/button>\r\n <h2 style=\"color: #70e400; text-align: center;\">CORE VIBES<\/h2>\r\n <div class=\"vibes-grid\">\r\n <div class=\"vibe-card\">\r\n <h3>Eat & Nap<\/h3>\r\n <p>No stress, no forced hype. Just holding and chilling.<\/p>\r\n <\/div>\r\n <div class=\"vibe-card\" style=\"background: #9ef01a;\">\r\n <h3>Little Things<\/h3>\r\n <p>Finding comfort in small, quiet, daily routines.<\/p>\r\n <\/div>\r\n <div class=\"vibe-card\" style=\"background: #38b000; color: #fff;\">\r\n <h3 style=\"color: #fff;\">Softer Days<\/h3>\r\n <p>A relaxed community culture built around simple, positive energy.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tokenomics-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'tokenomics-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('tokenomics-modal')\">\u2715<\/button>\r\n <h2 style=\"color: #3a86ff; text-align: center;\">TOKENOMICS<\/h2>\r\n <div class=\"tok-grid\">\r\n <div class=\"tok-box\"><span>Token Name<\/span><strong>NAMSEE<\/strong><\/div>\r\n <div class=\"tok-box\"><span>Ticker<\/span><strong>$NAM<\/strong><\/div>\r\n <div class=\"tok-box\"><span>Tax<\/span><strong>0% \/ 0%<\/strong><\/div>\r\n <div class=\"tok-box\"><span>Liquidity<\/span><strong>Burned<\/strong><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"community-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'community-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('community-modal')\">\u2715<\/button>\r\n <div class=\"social-box\">\r\n <h2>JOIN $NAM COMMUNITY<\/h2>\r\n <p style=\"margin-top: 10px; font-size: 1.2rem;\">Making days just a little softer together.<\/p>\r\n <div class=\"social-links\">\r\n <a href=\"YOUR-LINK\" class=\"doodle-btn btn-blue\" target=\"_blank\">Twitter \/ X<\/a>\r\n <a href=\"YOUR-LINK\" class=\"doodle-btn\" target=\"_blank\">Telegram<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"lightbox-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'lightbox-modal')\">\r\n <div class=\"lightbox-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('lightbox-modal')\">\u2715<\/button>\r\n <div class=\"lightbox-video-wrapper\">\r\n <video id=\"lightbox-video\" controls autoplay loop playsinline><\/video>\r\n <\/div>\r\n <p class=\"lightbox-caption\" id=\"lightbox-caption\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n function openModal(id) {\r\n document.getElementById(id).classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeModal(id) {\r\n const modal = document.getElementById(id);\r\n modal.classList.remove('active');\r\n \r\n \/\/ Hentikan video jika modal yang ditutup adalah lightbox\r\n if(id === 'lightbox-modal') {\r\n const video = document.getElementById('lightbox-video');\r\n video.pause();\r\n video.src = '';\r\n }\r\n\r\n document.body.style.overflow = 'auto';\r\n }\r\n\r\n function closeOnOverlay(event, id) {\r\n if (event.target.classList.contains('modal-overlay')) {\r\n closeModal(id);\r\n }\r\n }\r\n\r\n \/* Interactive Video Preview Lightbox Function *\/\r\n function previewVideo(videoSrc, captionText) {\r\n const lightboxVideo = document.getElementById('lightbox-video');\r\n const lightboxCaption = document.getElementById('lightbox-caption');\r\n \r\n lightboxVideo.src = videoSrc;\r\n lightboxCaption.innerText = captionText;\r\n \r\n openModal('lightbox-modal');\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d74d2d9 e-flex e-con-boxed e-con e-parent\" data-id=\"d74d2d9\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13f9bd4 elementor-widget elementor-widget-html\" data-id=\"13f9bd4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Copyright & CA Section - Slim Horizontal<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Knewave&family=Schoolbell&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* Reset bawaan khusus container ini *\/\r\n .nam-slim-footer * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Container Slim Horizontal - Tanpa Card, Tanpa Border Luar, Tanpa BG *\/\r\n .nam-slim-footer {\r\n width: 100%;\r\n max-width: 950px;\r\n margin: 0 auto;\r\n padding: 10px 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 15px;\r\n background: transparent !important; \/* Murni mengikuti BG bawaan WP *\/\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n }\r\n\r\n \/* 1. Copyright Text Horizontal (Sisi Kiri) *\/\r\n .slim-copyright-text {\r\n font-size: 0.95rem;\r\n color: #1a1a1a;\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n white-space: nowrap;\r\n order: 1; \/* Posisi Kiri *\/\r\n }\r\n\r\n .slim-copyright-text strong {\r\n font-family: 'Knewave', cursive;\r\n color: #ff4d6d;\r\n }\r\n\r\n \/* 2. Slim Interactive CA Strip (Sisi Kanan) *\/\r\n .slim-ca-box {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(255, 255, 255, 0.92);\r\n backdrop-filter: blur(4px);\r\n border: 2px solid #1a1a1a;\r\n border-radius: 50px;\r\n padding: 4px 6px 4px 10px;\r\n box-shadow: 2px 2px 0px #1a1a1a;\r\n order: 2; \/* Posisi Kanan *\/\r\n }\r\n\r\n \/* Label $NAM di Depan Box CA *\/\r\n .nam-prefix-tag {\r\n background: #ff4d6d;\r\n color: #ffffff;\r\n font-family: 'Knewave', cursive;\r\n font-size: 11px;\r\n padding: 2px 8px;\r\n border: 1.5px solid #1a1a1a;\r\n border-radius: 20px;\r\n box-shadow: 1px 1px 0px #1a1a1a;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .slim-ca-text {\r\n font-size: 0.85rem;\r\n font-weight: bold;\r\n color: #1a1a1a;\r\n word-break: break-all;\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n }\r\n\r\n .slim-copy-btn {\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 12px;\r\n padding: 4px 12px;\r\n border: 2px solid #1a1a1a;\r\n border-radius: 40px;\r\n cursor: pointer;\r\n box-shadow: 1px 2px 0px #1a1a1a;\r\n white-space: nowrap;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .slim-copy-btn:hover {\r\n background: #ff9f1c;\r\n transform: scale(1.05);\r\n }\r\n\r\n .slim-copy-btn:active {\r\n transform: scale(0.95);\r\n }\r\n\r\n \/* Toast Notification Popup *\/\r\n .toast-slim {\r\n position: fixed;\r\n bottom: -60px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n border: 2.5px solid #1a1a1a;\r\n padding: 6px 18px;\r\n border-radius: 50px;\r\n font-family: 'Knewave', cursive;\r\n font-size: 13px;\r\n box-shadow: 3px 3px 0px #1a1a1a;\r\n z-index: 99999;\r\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n }\r\n\r\n .toast-slim.show {\r\n bottom: 20px;\r\n }\r\n\r\n \/* Responsif Mobile untuk Menjaga Kerapihan *\/\r\n @media (max-width: 680px) {\r\n .nam-slim-footer {\r\n flex-direction: column;\r\n justify-content: center;\r\n text-align: center;\r\n gap: 10px;\r\n }\r\n .slim-copyright-text {\r\n order: 2; \/* Di mobile, copyright pindah ke bawah agar rapi *\/\r\n white-space: normal;\r\n }\r\n .slim-ca-box {\r\n order: 1; \/* Di mobile, CA box berada di atas *\/\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"nam-slim-footer\">\r\n \r\n \r\n <p class=\"slim-copyright-text\">\r\n \u00a9 2026 <strong>$NAM<\/strong>. All rights reserved. Just simple days.\r\n <\/p>\r\n\r\n \r\n <div class=\"slim-ca-box\">\r\n <span class=\"nam-prefix-tag\">$NAM<\/span>\r\n <span class=\"slim-ca-text\" id=\"slim-ca-val\">0x000000000000000000000000000000000000NAM<\/span>\r\n <button class=\"slim-copy-btn\" onclick=\"copyCA()\">Copy CA<\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div id=\"slim-toast\" class=\"toast-slim\">Copied to Clipboard! \ud83d\udc3e<\/div>\r\n\r\n <script>\r\n function copyCA() {\r\n const caText = document.getElementById('slim-ca-val').innerText;\r\n\r\n if (navigator.clipboard && navigator.clipboard.writeText) {\r\n navigator.clipboard.writeText(caText).then(() => {\r\n showToast();\r\n }).catch(() => {\r\n fallbackCopy(caText);\r\n });\r\n } else {\r\n fallbackCopy(caText);\r\n }\r\n }\r\n\r\n function fallbackCopy(text) {\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = text;\r\n document.body.appendChild(textArea);\r\n textArea.select();\r\n document.execCommand(\"copy\");\r\n document.body.removeChild(textArea);\r\n showToast();\r\n }\r\n\r\n function showToast() {\r\n const toast = document.getElementById('slim-toast');\r\n toast.classList.add('show');\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 2000);\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NAMSEE – Official Website | $NAM NAMSEE Official About Gallery Core Vibes Tokenomics Community NAMSEE $NAM Just Nam. Daily vibes, quiet moments, and simple days. Buy $NAM Join Community Daily Note \ud83d\udc3e “I eat, take naps, worry a little too much sometimes, and enjoy the little things. Hope these drawings make your day softer!” \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/namsee.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":26,"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/namsee.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n NAMSEE - Official Website | $NAM<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Knewave&family=Schoolbell&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* ==========================================\r\n 1. RESET & FULL BG STYLES\r\n ========================================== *\/\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html, body {\r\n width: 100%;\r\n min-height: 100vh;\r\n }\r\n\r\n body {\r\n \/* Wallpaper Full Screen *\/\r\n background-image: url('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/HERO1.jpg');\r\n background-size: cover;\r\n background-position: center center;\r\n background-repeat: no-repeat;\r\n background-attachment: fixed;\r\n color: #2b2b2b;\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n font-size: 18px;\r\n line-height: 1.4;\r\n overflow-x: hidden;\r\n position: relative;\r\n }\r\n\r\n h1, h2, h3 {\r\n font-family: 'Knewave', cursive, sans-serif;\r\n font-weight: normal;\r\n letter-spacing: 1px;\r\n color: #1a1a1a;\r\n text-transform: uppercase;\r\n }\r\n\r\n p, span, button, a {\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n font-weight: 300;\r\n }\r\n\r\n a {\r\n text-decoration: none;\r\n color: inherit;\r\n }\r\n\r\n \/* Outer Container *\/\r\n .namsee-wrapper {\r\n width: 100%;\r\n max-width: 1150px;\r\n margin: 0 auto;\r\n padding: 15px 20px;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n min-height: 100vh;\r\n }\r\n\r\n \/* ==========================================\r\n 2. HEADER NAV MENU (TOP FLOATING BAR)\r\n ========================================== *\/\r\n .top-navbar {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: rgba(255, 255, 255, 0.65);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border: 3.5px solid #1a1a1a;\r\n border-radius: 50px;\r\n padding: 8px 22px;\r\n box-shadow: 0px 4px 0px #1a1a1a;\r\n width: 100%;\r\n z-index: 100;\r\n }\r\n\r\n .brand-logo-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .brand-logo {\r\n font-family: 'Knewave', cursive;\r\n font-size: 1.8rem;\r\n color: #ff4d6d;\r\n text-shadow: 2px 2px 0px #1a1a1a;\r\n }\r\n\r\n .official-badge {\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 10px;\r\n padding: 2px 8px;\r\n border: 1.5px solid #1a1a1a;\r\n border-radius: 12px;\r\n box-shadow: 1px 1px 0px #1a1a1a;\r\n text-transform: uppercase;\r\n }\r\n\r\n .nav-menu {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .nav-btn {\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 15px;\r\n padding: 6px 16px;\r\n border: 2.5px solid #1a1a1a;\r\n border-radius: 20px;\r\n box-shadow: 2px 3px 0px #1a1a1a;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .nav-btn:hover {\r\n transform: translateY(-2px) scale(1.05);\r\n box-shadow: 4px 5px 0px #1a1a1a;\r\n background: #ff9f1c;\r\n }\r\n\r\n .nav-btn:active {\r\n transform: translateY(1px);\r\n box-shadow: 1px 1px 0px #1a1a1a;\r\n }\r\n\r\n \/* Spacer Tengah *\/\r\n .hero-spacer {\r\n flex-grow: 1;\r\n min-height: 100px;\r\n }\r\n\r\n \/* ==========================================\r\n 3. ANIMATED & PLAYFUL HERO LAYOUT\r\n ========================================== *\/\r\n .hero-bottom-container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-end;\r\n gap: 20px;\r\n width: 100%;\r\n margin-bottom: 10px;\r\n }\r\n\r\n \/* Keyframe Floating Smooth Movement *\/\r\n @keyframes floatLeft {\r\n 0% { transform: translateY(0px) rotate(-1.5deg); }\r\n 50% { transform: translateY(-10px) rotate(-0.5deg); }\r\n 100% { transform: translateY(0px) rotate(-1.5deg); }\r\n }\r\n\r\n @keyframes floatRight {\r\n 0% { transform: translateY(0px) rotate(2deg); }\r\n 50% { transform: translateY(-12px) rotate(0.8deg); }\r\n 100% { transform: translateY(0px) rotate(2deg); }\r\n }\r\n\r\n \/* Left Banner (Title, Ticker, & CTAs) *\/\r\n .hero-left {\r\n max-width: 420px;\r\n width: 100%;\r\n background: rgba(255, 253, 245, 0.92);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n border: 3.5px solid #1a1a1a;\r\n border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px; \/* Doodle Organic Border *\/\r\n padding: 22px;\r\n box-shadow: 6px 7px 0px #1a1a1a;\r\n animation: floatLeft 6s ease-in-out infinite;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .hero-left:hover {\r\n animation-play-state: paused;\r\n transform: translateY(-6px) rotate(0deg) scale(1.02);\r\n box-shadow: 8px 10px 0px #1a1a1a;\r\n }\r\n\r\n .hero-left h1 {\r\n font-size: 2.8rem;\r\n color: #ff4d6d;\r\n text-shadow: 3px 3px 0px #1a1a1a;\r\n line-height: 0.9;\r\n margin-bottom: 2px;\r\n }\r\n\r\n .hero-left .ticker {\r\n font-size: 1.6rem;\r\n color: #ffb703;\r\n text-shadow: 2px 2px 0px #1a1a1a;\r\n display: block;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .hero-left p.subtitle {\r\n font-size: 1.1rem;\r\n color: #1a1a1a;\r\n margin-bottom: 15px;\r\n font-weight: bold;\r\n }\r\n\r\n \/* Right Banner (Doodle Note & Quote) *\/\r\n .hero-right {\r\n max-width: 350px;\r\n width: 100%;\r\n background: rgba(255, 240, 243, 0.94);\r\n backdrop-filter: blur(8px);\r\n -webkit-backdrop-filter: blur(8px);\r\n border: 3.5px solid #1a1a1a;\r\n border-radius: 15px 255px 15px 225px\/225px 15px 255px 15px; \/* Doodle Organic Border Opposite *\/\r\n padding: 20px;\r\n box-shadow: 6px 7px 0px #1a1a1a;\r\n animation: floatRight 7s ease-in-out infinite 0.5s;\r\n transition: all 0.3s ease;\r\n }\r\n\r\n .hero-right:hover {\r\n animation-play-state: paused;\r\n transform: translateY(-6px) rotate(0deg) scale(1.02);\r\n box-shadow: 8px 10px 0px #1a1a1a;\r\n }\r\n\r\n .sticker-badge {\r\n display: inline-block;\r\n background: #4cc9f0;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 12px;\r\n padding: 4px 12px;\r\n border: 2px solid #1a1a1a;\r\n border-radius: 50px;\r\n box-shadow: 2px 2px 0px #1a1a1a;\r\n margin-bottom: 10px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .hero-right p.quote-text {\r\n font-size: 1.05rem;\r\n color: #1a1a1a;\r\n line-height: 1.35;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .hero-right span.author {\r\n display: block;\r\n font-family: 'Knewave', cursive;\r\n font-size: 0.95rem;\r\n color: #ff006e;\r\n text-align: right;\r\n }\r\n\r\n \/* CTA Buttons *\/\r\n .cta-group {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .doodle-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 14px;\r\n padding: 8px 16px;\r\n border: 2.5px solid #1a1a1a;\r\n border-radius: 18px;\r\n box-shadow: 3px 3px 0px #1a1a1a;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n text-align: center;\r\n }\r\n\r\n .doodle-btn:hover {\r\n background: #ff9f1c;\r\n transform: translateY(-2px) scale(1.03);\r\n box-shadow: 4px 5px 0px #1a1a1a;\r\n }\r\n\r\n .btn-purple { background: #b5179e; color: #fff; }\r\n .btn-purple:hover { background: #7209b7; }\r\n .btn-blue { background: #4cc9f0; color: #1a1a1a; }\r\n .btn-blue:hover { background: #4895ef; }\r\n\r\n \/* ==========================================\r\n 4. POP-UP MODALS (CENTERED SYSTEM)\r\n ========================================== *\/\r\n .modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.6);\r\n backdrop-filter: blur(6px);\r\n -webkit-backdrop-filter: blur(6px);\r\n z-index: 9999;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n padding: 20px;\r\n }\r\n\r\n .modal-overlay.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .modal-content {\r\n background: #fffdf5;\r\n border: 4px solid #1a1a1a;\r\n border-radius: 25px;\r\n width: 100%;\r\n max-width: 800px;\r\n max-height: 85vh;\r\n overflow-y: auto;\r\n padding: 30px 20px 20px 20px;\r\n box-shadow: 6px 8px 0px #1a1a1a;\r\n transform: scale(0.85);\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n position: relative;\r\n }\r\n\r\n .modal-overlay.active .modal-content {\r\n transform: scale(1);\r\n }\r\n\r\n .close-btn {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n background: #ff4d6d;\r\n color: #fff;\r\n border: 3px solid #1a1a1a;\r\n border-radius: 50%;\r\n width: 36px;\r\n height: 36px;\r\n font-family: 'Knewave', cursive;\r\n font-size: 16px;\r\n cursor: pointer;\r\n box-shadow: 2px 2px 0px #1a1a1a;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10;\r\n }\r\n\r\n .close-btn:hover {\r\n transform: scale(1.1);\r\n }\r\n\r\n \/* ==========================================\r\n 5. MODAL CONTENT INTERNAL STYLES\r\n ========================================== *\/\r\n \/* About Inner *\/\r\n .about-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n align-items: center;\r\n }\r\n .about-text h2 { font-size: 2rem; color: #2a9d8f; margin-bottom: 10px; text-shadow: 2px 2px 0px #1a1a1a; }\r\n .about-text p { font-size: 1.15rem; margin-bottom: 10px; }\r\n .about-image {\r\n border: 3.5px solid #1a1a1a;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 4px 4px 0px #1a1a1a;\r\n background: #fff;\r\n }\r\n .about-image img { width: 100%; height: auto; display: block; }\r\n\r\n \/* Gallery Inner & Video Click Preview *\/\r\n .gallery-header h2 { text-align: center; font-size: 2.2rem; color: #ff70a6; text-shadow: 2px 2px 0px #1a1a1a; margin-bottom: 5px; }\r\n .gallery-header p { text-align: center; font-size: 1rem; color: #666; margin-bottom: 15px; }\r\n .gallery-main-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 15px; }\r\n \r\n .gallery-card { \r\n background: #fff; \r\n padding: 10px; \r\n border: 3px solid #1a1a1a; \r\n border-radius: 14px; \r\n text-align: center; \r\n box-shadow: 3px 3px 0px #1a1a1a;\r\n cursor: pointer;\r\n transition: transform 0.2s ease;\r\n }\r\n .gallery-card:hover { transform: translateY(-3px) scale(1.02); }\r\n .gallery-card:nth-child(1) { background: #e0aaff; }\r\n .gallery-card:nth-child(2) { background: #c8b6ff; }\r\n .gallery-card:nth-child(3) { background: #ffd6ff; }\r\n \r\n .video-box { \r\n border: 2px solid #1a1a1a; \r\n border-radius: 8px; \r\n overflow: hidden; \r\n margin-bottom: 6px; \r\n background: #000; \r\n position: relative;\r\n }\r\n .video-box video { width: 100%; height: 160px; object-fit: cover; display: block; pointer-events: none; }\r\n .click-hint {\r\n position: absolute;\r\n top: 8px;\r\n right: 8px;\r\n background: rgba(0,0,0,0.6);\r\n color: #fff;\r\n font-size: 10px;\r\n padding: 2px 8px;\r\n border-radius: 10px;\r\n font-family: 'Knewave', cursive;\r\n }\r\n .gallery-card p { font-size: 0.95rem; font-weight: bold; color: #1a1a1a; }\r\n \r\n .gallery-extra-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }\r\n .mini-video-card { \r\n border: 2.5px solid #1a1a1a; \r\n border-radius: 10px; \r\n overflow: hidden; \r\n box-shadow: 2px 2px 0px #1a1a1a; \r\n background: #fff;\r\n cursor: pointer;\r\n transition: transform 0.2s ease;\r\n }\r\n .mini-video-card:hover { transform: translateY(-3px) scale(1.04); }\r\n .mini-video-card video { width: 100%; height: 110px; object-fit: cover; display: block; pointer-events: none; }\r\n\r\n \/* VIDEO PREVIEW LIGHTBOX *\/\r\n .lightbox-content {\r\n background: #fffdf5;\r\n border: 4px solid #1a1a1a;\r\n border-radius: 20px;\r\n padding: 20px;\r\n max-width: 650px;\r\n width: 100%;\r\n text-align: center;\r\n box-shadow: 6px 8px 0px #1a1a1a;\r\n position: relative;\r\n }\r\n .lightbox-video-wrapper {\r\n border: 3px solid #1a1a1a;\r\n border-radius: 14px;\r\n overflow: hidden;\r\n background: #000;\r\n margin-bottom: 12px;\r\n }\r\n .lightbox-video-wrapper video {\r\n width: 100%;\r\n max-height: 60vh;\r\n display: block;\r\n }\r\n .lightbox-caption {\r\n font-size: 1.2rem;\r\n font-weight: bold;\r\n color: #1a1a1a;\r\n }\r\n\r\n \/* Vibes Inner *\/\r\n .vibes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 15px; }\r\n .vibe-card { background: #ccff33; border: 3px solid #1a1a1a; border-radius: 16px; padding: 15px; text-align: center; box-shadow: 3px 3px 0px #1a1a1a; }\r\n .vibe-card h3 { font-size: 1.4rem; margin-bottom: 6px; color: #1a1a1a; }\r\n\r\n \/* Tokenomics Inner *\/\r\n .tok-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 15px 0; }\r\n .tok-box { background: #fff; border: 2.5px solid #1a1a1a; border-radius: 12px; padding: 12px; text-align: center; box-shadow: 3px 3px 0px #1a1a1a; }\r\n .tok-box strong { font-family: 'Knewave', cursive; font-size: 1.2rem; color: #ff006e; display: block; }\r\n\r\n \/* Community Inner *\/\r\n .social-box { text-align: center; padding: 15px 0; }\r\n .social-links { display: flex; gap: 12px; justify-content: center; margin-top: 15px; flex-wrap: wrap; }\r\n\r\n \/* ==========================================\r\n 6. MOBILE RESPONSIVE ADAPTATION\r\n ========================================== *\/\r\n @media (max-width: 768px) {\r\n .top-navbar {\r\n flex-direction: column;\r\n gap: 8px;\r\n border-radius: 20px;\r\n }\r\n .hero-bottom-container {\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n .hero-left, .hero-right {\r\n max-width: 100%;\r\n animation: none; \/* Nonaktifkan animasi bergelombang di layar HP agar tetap stabil *\/\r\n }\r\n .hero-left h1 { font-size: 2.2rem; }\r\n .hero-left .ticker { font-size: 1.3rem; }\r\n .about-grid { grid-template-columns: 1fr; }\r\n .gallery-main-grid { grid-template-columns: 1fr; }\r\n .cta-group { flex-direction: column; }\r\n .doodle-btn { width: 100%; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"namsee-wrapper\">\r\n\r\n \r\n <header class=\"top-navbar\">\r\n <div class=\"brand-logo-container\">\r\n <div class=\"brand-logo\">NAMSEE<\/div>\r\n <span class=\"official-badge\">Official<\/span>\r\n <\/div>\r\n <nav class=\"nav-menu\">\r\n <button class=\"nav-btn\" onclick=\"openModal('about-modal')\">About<\/button>\r\n <button class=\"nav-btn\" onclick=\"openModal('gallery-modal')\">Gallery<\/button>\r\n <button class=\"nav-btn\" onclick=\"openModal('vibes-modal')\">Core Vibes<\/button>\r\n <button class=\"nav-btn\" onclick=\"openModal('tokenomics-modal')\">Tokenomics<\/button>\r\n <button class=\"nav-btn\" onclick=\"openModal('community-modal')\">Community<\/button>\r\n <\/nav>\r\n <\/header>\r\n\r\n \r\n <div class=\"hero-spacer\"><\/div>\r\n\r\n \r\n <main class=\"hero-bottom-container\">\r\n \r\n \r\n <div class=\"hero-left\">\r\n <h1>NAMSEE<\/h1>\r\n <span class=\"ticker\">$NAM<\/span>\r\n <p class=\"subtitle\">Just Nam. Daily vibes, quiet moments, and simple days.<\/p>\r\n\r\n <div class=\"cta-group\">\r\n <a href=\"YOUR-LINK\" class=\"doodle-btn btn-purple\" target=\"_blank\">Buy $NAM<\/a>\r\n <a href=\"YOUR-LINK\" class=\"doodle-btn btn-blue\" target=\"_blank\">Join Community<\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"hero-right\">\r\n <span class=\"sticker-badge\">Daily Note \ud83d\udc3e<\/span>\r\n <p class=\"quote-text\">\"I eat, take naps, worry a little too much sometimes, and enjoy the little things. Hope these drawings make your day softer!\"<\/p>\r\n <span class=\"author\">\u2014 Nam<\/span>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n <\/div>\r\n\r\n \r\n\r\n \r\n <div id=\"about-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'about-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('about-modal')\">\u2715<\/button>\r\n <div class=\"about-grid\">\r\n <div class=\"about-text\">\r\n <h2>ABOUT $NAM<\/h2>\r\n <p>Hi, I'm Nam.<\/p>\r\n <p>I don't do anything extraordinary. I eat, take naps, worry a little too much sometimes, and enjoy the little things in life. These drawings are little pieces of my everyday life.<\/p>\r\n <p>$NAM is about bringing these simple moments into the crypto space\u2014making every day just a little softer.<\/p>\r\n <\/div>\r\n <div class=\"about-image\">\r\n <img decoding=\"async\" src=\"https:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/ASET-ABOUT.png\" alt=\"Nam About Asset\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"gallery-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'gallery-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('gallery-modal')\">\u2715<\/button>\r\n <div class=\"gallery-header\">\r\n <h2>GALLERY (Everyday Moments)<\/h2>\r\n <p>Click any video card for a full preview! \ud83c\udfac<\/p>\r\n <\/div>\r\n \r\n <div class=\"gallery-main-grid\">\r\n <div class=\"gallery-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-3.mp4', 'Ready for another simple day.')\">\r\n <div class=\"video-box\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-3.mp4\" type=\"video\/mp4\"><\/video>\r\n <span class=\"click-hint\">Zoom \ud83d\udd0d<\/span>\r\n <\/div>\r\n <p>\"Ready for another simple day.\"<\/p>\r\n <\/div>\r\n <div class=\"gallery-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-4.mp4', 'Taking a slow walk outside.')\">\r\n <div class=\"video-box\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-4.mp4\" type=\"video\/mp4\"><\/video>\r\n <span class=\"click-hint\">Zoom \ud83d\udd0d<\/span>\r\n <\/div>\r\n <p>\"Taking a slow walk outside.\"<\/p>\r\n <\/div>\r\n <div class=\"gallery-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-5.mp4', 'Naps, snacks, and zero rush.')\">\r\n <div class=\"video-box\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-5.mp4\" type=\"video\/mp4\"><\/video>\r\n <span class=\"click-hint\">Zoom \ud83d\udd0d<\/span>\r\n <\/div>\r\n <p>\"Naps, snacks, and zero rush.\"<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"gallery-extra-grid\">\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-6.mp4', 'Daily Nam Moments #6')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-6.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-7.mp4', 'Daily Nam Moments #7')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-7.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-8.mp4', 'Daily Nam Moments #8')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-8.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-9.mp4', 'Daily Nam Moments #9')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-9.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <div class=\"mini-video-card\" onclick=\"previewVideo('http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-10.mp4', 'Daily Nam Moments #10')\">\r\n <video autoplay loop muted playsinline><source src=\"http:\/\/namsee.fun\/wp-content\/uploads\/2026\/08\/NAMSEE-10.mp4\" type=\"video\/mp4\"><\/video>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"vibes-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'vibes-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('vibes-modal')\">\u2715<\/button>\r\n <h2 style=\"color: #70e400; text-align: center;\">CORE VIBES<\/h2>\r\n <div class=\"vibes-grid\">\r\n <div class=\"vibe-card\">\r\n <h3>Eat & Nap<\/h3>\r\n <p>No stress, no forced hype. Just holding and chilling.<\/p>\r\n <\/div>\r\n <div class=\"vibe-card\" style=\"background: #9ef01a;\">\r\n <h3>Little Things<\/h3>\r\n <p>Finding comfort in small, quiet, daily routines.<\/p>\r\n <\/div>\r\n <div class=\"vibe-card\" style=\"background: #38b000; color: #fff;\">\r\n <h3 style=\"color: #fff;\">Softer Days<\/h3>\r\n <p>A relaxed community culture built around simple, positive energy.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"tokenomics-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'tokenomics-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('tokenomics-modal')\">\u2715<\/button>\r\n <h2 style=\"color: #3a86ff; text-align: center;\">TOKENOMICS<\/h2>\r\n <div class=\"tok-grid\">\r\n <div class=\"tok-box\"><span>Token Name<\/span><strong>NAMSEE<\/strong><\/div>\r\n <div class=\"tok-box\"><span>Ticker<\/span><strong>$NAM<\/strong><\/div>\r\n <div class=\"tok-box\"><span>Tax<\/span><strong>0% \/ 0%<\/strong><\/div>\r\n <div class=\"tok-box\"><span>Liquidity<\/span><strong>Burned<\/strong><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"community-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'community-modal')\">\r\n <div class=\"modal-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('community-modal')\">\u2715<\/button>\r\n <div class=\"social-box\">\r\n <h2>JOIN $NAM COMMUNITY<\/h2>\r\n <p style=\"margin-top: 10px; font-size: 1.2rem;\">Making days just a little softer together.<\/p>\r\n <div class=\"social-links\">\r\n <a href=\"YOUR-LINK\" class=\"doodle-btn btn-blue\" target=\"_blank\">Twitter \/ X<\/a>\r\n <a href=\"YOUR-LINK\" class=\"doodle-btn\" target=\"_blank\">Telegram<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"lightbox-modal\" class=\"modal-overlay\" onclick=\"closeOnOverlay(event, 'lightbox-modal')\">\r\n <div class=\"lightbox-content\">\r\n <button class=\"close-btn\" onclick=\"closeModal('lightbox-modal')\">\u2715<\/button>\r\n <div class=\"lightbox-video-wrapper\">\r\n <video id=\"lightbox-video\" controls autoplay loop playsinline><\/video>\r\n <\/div>\r\n <p class=\"lightbox-caption\" id=\"lightbox-caption\"><\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n function openModal(id) {\r\n document.getElementById(id).classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n }\r\n\r\n function closeModal(id) {\r\n const modal = document.getElementById(id);\r\n modal.classList.remove('active');\r\n \r\n \/\/ Hentikan video jika modal yang ditutup adalah lightbox\r\n if(id === 'lightbox-modal') {\r\n const video = document.getElementById('lightbox-video');\r\n video.pause();\r\n video.src = '';\r\n }\r\n\r\n document.body.style.overflow = 'auto';\r\n }\r\n\r\n function closeOnOverlay(event, id) {\r\n if (event.target.classList.contains('modal-overlay')) {\r\n closeModal(id);\r\n }\r\n }\r\n\r\n \/* Interactive Video Preview Lightbox Function *\/\r\n function previewVideo(videoSrc, captionText) {\r\n const lightboxVideo = document.getElementById('lightbox-video');\r\n const lightboxCaption = document.getElementById('lightbox-caption');\r\n \r\n lightboxVideo.src = videoSrc;\r\n lightboxCaption.innerText = captionText;\r\n \r\n openModal('lightbox-modal');\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d74d2d9 e-flex e-con-boxed e-con e-parent\" data-id=\"d74d2d9\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-13f9bd4 elementor-widget elementor-widget-html\" data-id=\"13f9bd4\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Copyright & CA Section - Slim Horizontal<\/title>\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Knewave&family=Schoolbell&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* Reset bawaan khusus container ini *\/\r\n .nam-slim-footer * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n \/* Container Slim Horizontal - Tanpa Card, Tanpa Border Luar, Tanpa BG *\/\r\n .nam-slim-footer {\r\n width: 100%;\r\n max-width: 950px;\r\n margin: 0 auto;\r\n padding: 10px 15px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 15px;\r\n background: transparent !important; \/* Murni mengikuti BG bawaan WP *\/\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n }\r\n\r\n \/* 1. Copyright Text Horizontal (Sisi Kiri) *\/\r\n .slim-copyright-text {\r\n font-size: 0.95rem;\r\n color: #1a1a1a;\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n white-space: nowrap;\r\n order: 1; \/* Posisi Kiri *\/\r\n }\r\n\r\n .slim-copyright-text strong {\r\n font-family: 'Knewave', cursive;\r\n color: #ff4d6d;\r\n }\r\n\r\n \/* 2. Slim Interactive CA Strip (Sisi Kanan) *\/\r\n .slim-ca-box {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(255, 255, 255, 0.92);\r\n backdrop-filter: blur(4px);\r\n border: 2px solid #1a1a1a;\r\n border-radius: 50px;\r\n padding: 4px 6px 4px 10px;\r\n box-shadow: 2px 2px 0px #1a1a1a;\r\n order: 2; \/* Posisi Kanan *\/\r\n }\r\n\r\n \/* Label $NAM di Depan Box CA *\/\r\n .nam-prefix-tag {\r\n background: #ff4d6d;\r\n color: #ffffff;\r\n font-family: 'Knewave', cursive;\r\n font-size: 11px;\r\n padding: 2px 8px;\r\n border: 1.5px solid #1a1a1a;\r\n border-radius: 20px;\r\n box-shadow: 1px 1px 0px #1a1a1a;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .slim-ca-text {\r\n font-size: 0.85rem;\r\n font-weight: bold;\r\n color: #1a1a1a;\r\n word-break: break-all;\r\n font-family: 'Schoolbell', cursive, sans-serif;\r\n }\r\n\r\n .slim-copy-btn {\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n font-family: 'Knewave', cursive;\r\n font-size: 12px;\r\n padding: 4px 12px;\r\n border: 2px solid #1a1a1a;\r\n border-radius: 40px;\r\n cursor: pointer;\r\n box-shadow: 1px 2px 0px #1a1a1a;\r\n white-space: nowrap;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .slim-copy-btn:hover {\r\n background: #ff9f1c;\r\n transform: scale(1.05);\r\n }\r\n\r\n .slim-copy-btn:active {\r\n transform: scale(0.95);\r\n }\r\n\r\n \/* Toast Notification Popup *\/\r\n .toast-slim {\r\n position: fixed;\r\n bottom: -60px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n background: #ffbe0b;\r\n color: #1a1a1a;\r\n border: 2.5px solid #1a1a1a;\r\n padding: 6px 18px;\r\n border-radius: 50px;\r\n font-family: 'Knewave', cursive;\r\n font-size: 13px;\r\n box-shadow: 3px 3px 0px #1a1a1a;\r\n z-index: 99999;\r\n transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);\r\n }\r\n\r\n .toast-slim.show {\r\n bottom: 20px;\r\n }\r\n\r\n \/* Responsif Mobile untuk Menjaga Kerapihan *\/\r\n @media (max-width: 680px) {\r\n .nam-slim-footer {\r\n flex-direction: column;\r\n justify-content: center;\r\n text-align: center;\r\n gap: 10px;\r\n }\r\n .slim-copyright-text {\r\n order: 2; \/* Di mobile, copyright pindah ke bawah agar rapi *\/\r\n white-space: normal;\r\n }\r\n .slim-ca-box {\r\n order: 1; \/* Di mobile, CA box berada di atas *\/\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div class=\"nam-slim-footer\">\r\n \r\n \r\n <p class=\"slim-copyright-text\">\r\n \u00a9 2026 <strong>$NAM<\/strong>. All rights reserved. Just simple days.\r\n <\/p>\r\n\r\n \r\n <div class=\"slim-ca-box\">\r\n <span class=\"nam-prefix-tag\">$NAM<\/span>\r\n <span class=\"slim-ca-text\" id=\"slim-ca-val\">0x000000000000000000000000000000000000NAM<\/span>\r\n <button class=\"slim-copy-btn\" onclick=\"copyCA()\">Copy CA<\/button>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n \r\n <div id=\"slim-toast\" class=\"toast-slim\">Copied to Clipboard! \ud83d\udc3e<\/div>\r\n\r\n <script>\r\n function copyCA() {\r\n const caText = document.getElementById('slim-ca-val').innerText;\r\n\r\n if (navigator.clipboard && navigator.clipboard.writeText) {\r\n navigator.clipboard.writeText(caText).then(() => {\r\n showToast();\r\n }).catch(() => {\r\n fallbackCopy(caText);\r\n });\r\n } else {\r\n fallbackCopy(caText);\r\n }\r\n }\r\n\r\n function fallbackCopy(text) {\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = text;\r\n document.body.appendChild(textArea);\r\n textArea.select();\r\n document.execCommand(\"copy\");\r\n document.body.removeChild(textArea);\r\n showToast();\r\n }\r\n\r\n function showToast() {\r\n const toast = document.getElementById('slim-toast');\r\n toast.classList.add('show');\r\n setTimeout(() => {\r\n toast.classList.remove('show');\r\n }, 2000);\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NAMSEE – Official Website | $NAM NAMSEE Official About Gallery Core Vibes Tokenomics Community NAMSEE $NAM Just Nam. Daily vibes, quiet moments, and simple days. Buy $NAM Join Community Daily Note \ud83d\udc3e “I eat, take naps, worry a little too much sometimes, and enjoy the little things. Hope these drawings make your day softer!” \u2014 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/namsee.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":26,"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":55,"href":"https:\/\/namsee.fun\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/55"}],"wp:attachment":[{"href":"https:\/\/namsee.fun\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}