/* ============================================================
   GlobalPiggy Web - Brand Override Layer  (load AFTER theme style.css)
   App brand: Savings Green #1F7A4D / Trust Navy #14213D / Coin Gold #FFB300,
   dark template -> app light off-white theme.
   Reversible: delete this file + its <link> to restore the template.
   ============================================================ */
/* fonts loaded via <link preconnect> in index.html (SEO/CWV: non-blocking)
   Poppins = display/headings (Latin), Pretendard = body + Korean fallback. */
:root{
  /* brand palette */
  --gp-primary:#1F7A4D; --gp-navy:#14213D; --gp-gold:#FFB300; --gp-bg:#F8F8F8;
  /* type (parallel to nodajifi_web brand.css) */
  --gp-font-display:'Poppins','Pretendard',sans-serif;   /* Latin -> Poppins, Korean -> Pretendard */
  --gp-font-body:'Pretendard','Poppins',sans-serif;       /* clean full Latin+Hangul body face */
  /* spacing / shape / elevation tokens */
  --gp-space-sec:90px; --gp-space-sec-sm:60px;
  --gp-radius:16px; --gp-radius-sm:12px; --gp-radius-pill:999px;
  --gp-shadow:0 6px 18px rgba(20,33,61,.06);
  --gp-shadow-sm:0 4px 14px rgba(20,33,61,.05);
  --gp-ink-body:#4a5568;
  --gp-h1:34px; --gp-h1-sm:26px; --gp-body:16px;
}
body{ font-family:var(--gp-font-body) !important; background-color:var(--gp-bg) !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1,h2,h3,h4,h5,h6,.font-primary{ font-family:var(--gp-font-display) !important; letter-spacing:-.01em; }
/* generated: yellow->green, pink->gold, blue->navy, dark->light */

body {
  background-color: #F8F8F8 !important;
}
::-webkit-scrollbar {
  background-color: #1F7A4D !important;
}
::-webkit-scrollbar-thumb {
  background:#1F7A4D !important;
}
.bg-yellow, .hvr-bg-yellow:hover {
  background-color: #1F7A4D !important;
}
.bg-pink, .hvr-bg-pink:hover {
  background-color: #FFB300 !important;
}
.bg-blue, .hvr-bg-blue:hover {
  background-color: #14213D !important;
}
.bg-black {
  background-color: #14213D !important;
}
.overlay {
  background-color: #1F7A4D !important;
}
.color-black {
  color: #14213D !important;
}
.color-yellow {
  color: #1F7A4D !important;
}
.color-red {
  color: #C2410C !important;
}
.color-pink {
  color: #FFB300 !important;
}
.color-blue {
  color: #14213D !important;
}
.text-black {
  color: #14213D !important;
}
.text-yellow {
  color: #1F7A4D !important;
}
.btn-yellow {
  border-color: #1F7A4D !important;
  background-color: #1F7A4D !important;
}
.btn-pink {
  border-color: #FFB300 !important;
  background-color: #FFB300 !important;
}
.btn-blue {
  border-color: #14213D !important;
  background-color: #14213D !important;
}
.btn-white {
  color: #14213D !important;
}
.btn-transparent2 {
  border: 1px solid #14213D !important;
  color: #14213D !important;
}
.btn-black {
  border-color: #F8F8F8 !important;
  background-color: #F8F8F8 !important;
}
.btn-transparent3:hover, .btn-transparent3:focus {
  color: #14213D !important;
}
.btn-white2:hover, .btn-white2:focus {
  color: #14213D !important;
}
.btn-hvr-yellow:after {
  background-color: #1F7A4D !important;
}
.btn-hvr-yellow:hover, .btn-hvr-yellow:focus {
  border-color: #1F7A4D !important;
}
.btn-hvr-pink:after {
  background-color: #FFB300 !important;
}
.btn-hvr-pink:hover, .btn-hvr-pink:focus {
  border-color: #FFB300 !important;
}
.btn-hvr-blue:after {
  background-color: #14213D !important;
}
.btn-hvr-blue:hover, .btn-hvr-blue:focus {
  border-color: #14213D !important;
}
.transparent-bg.black .menu_bars span, .just-menu .menu_bars span {
  background: #14213D !important;
}
.header-appear .transparent-bg.nav-three-circles .navbar-nav .nav-link,
.header-appear .transparent-bg.nav-three-circles .navbar-nav .nav-link:hover,
.header-appear .transparent-bg.nav-three-circles .navbar-nav .nav-link.active {
  color: #14213D !important;
}
.nav-three-circles .navbar-nav .nav-item .nav-link.active::after,
.nav-three-circles .navbar-nav .nav-item .nav-link:hover::after {
  color: #1F7A4D !important;
  text-shadow: 10px 0 #14213D, -10px 0 #FFB300 !important;
}
.black.navbar-top-default .navbar-nav .nav-link {
  color: #14213D !important;
}
.navbar-top-default .navbar-nav .nav-link:hover {
  color: #1F7A4D !important;
}
.header-appear .navbar-top-default {
  background: #F8F8F8 !important;
}
header .navbar-top-default .header-social a {
  color: #14213D !important;
}
header .transparent-bg.black.navbar-top-default .header-social a {
  color: #14213D !important;
}
header.header-appear .navbar-top-default .header-social a, header.header-appear .transparent-bg.navbar-top-default .header-social a {
  color: #14213D !important;
}
.side-menu .btn-close::before, .side-menu .btn-close::after {
  background: #14213D !important;
}
.quarter-circle {
  background: #F8F8F8 !important;
}
.awaza .tp-bullet {
  color: #14213D !important;
}
.awaza .tp-bullet.selected .tp-count:before, .awaza .tp-bullet.selected .tp-count:after {
  background: #FFB300 !important;
}
.rare-box {
  background: #FFB300 !important;
}
.team-classic-content.pink:before {
  background: #FFB300 !important;
}
.team-classic-content.yellow:before {
  background: #1F7A4D !important;
}
.team-classic-content.blue:before {
  background: #14213D !important;
}
.cbp-filter-style:after {
  background: #1F7A4D !important;
}
.cbp-l-filters-alignCenter .cbp-filter-item.cbp-filter-item-active {
  color: #FFB300 !important;
}
.cbp-l-filters-alignCenter .cbp-filter-counter {
  background-color: #1F7A4D !important;
}
.cbp-l-filters-alignCenter .cbp-filter-counter:after {
  border-top: 4px solid #1F7A4D !important;
}
.cbp-l-filters-alignCenter .cbp-filter-item:hover {
  color: #1F7A4D !important;
}
.cbp-l-grid-mosaic-flat .cbp-l-caption-title:after {
  background-color: #F8F8F8 !important;
}
.cbp-l-grid-mosaic-flat .work-icon {
  border: 1px solid #1F7A4D !important;
  background: #1F7A4D !important;
}
.price-box, .price-box2 {
  color: #14213D !important;
}
.pricing-item {
  background: #F8F8F8 !important;
}
.quarter-triangle {
  border: 55px solid #1F7A4D !important;
}
.pricing-item .btn-pink {
  border-color: #FFB300 !important;
  background-color: #FFB300 !important;
}
.pricing-item .btn-yellow {
  border-color: #1F7A4D !important;
  background-color: #1F7A4D !important;
}
.pricing-item .btn-blue {
  border-color: #14213D !important;
  background-color: #14213D !important;
}
.pricing-item .btn-pink:focus, .pricing-item .btn-pink:hover, .pricing-item .btn-yellow:focus, .pricing-item .btn-yellow:hover, .pricing-item .btn-blue:focus, .pricing-item .btn-blue:hover {
  color: #F8F8F8 !important;
}
.testimonial-two {
  background: #F8F8F8 !important;
}
.testimonial-post:hover a, .testimonial-post:focus a {
  color: #FFB300 !important;
}
.testimonial-two .testimonial-item .rating i {
  color: #14213D !important;
}
.owl-thumbs.owl-dots .owl-dot.animated-wrap.active .animated-element {
  border-color: #1F7A4D !important;
}
.address-social.black a {
  color: #14213D !important;
}
.copyrights a:hover, .copyrights a:focus {
  color: #1F7A4D !important;
}
.footer-links-group a:hover,
.footer-links-group a:focus {
  color: #1F7A4D !important;
}
.news_item:hover h3 a {
  color: #1F7A4D !important;
}
.search-box .form-control:focus, .search-box textarea:focus {
  border-color: #1F7A4D !important;
}
.search-box .search-addon {
  background-color: #1F7A4D !important;
}
.search-addon:hover {
  background: #FFB300 !important;
}
.search-box.bg-change .search-addon {
  background-color: #FFB300 !important;
}
.search-box.bg-change .search-addon:hover {
  background-color: #1F7A4D !important;
}
.single-post:hover a, .single-post:focus a {
  color: #1F7A4D !important;
}
.categories-name > a > p:hover {
  color: #1F7A4D !important;
}
.categories-name > a > p:hover span {
  background: #1F7A4D !important;
}
.tags li:hover, .tags li:focus {
  background: #1F7A4D !important;
  border: 1px solid #1F7A4D !important;
}
ul.rounded li::before {
  background: #1F7A4D !important;
}
.pagination li > a:hover, .pagination li > a:focus {
  background: #1F7A4D !important;
}
.pagination li.active > a {
  background: #1F7A4D !important;
}
.newsletter-icon i {
  color: #14213D !important;
}
.subscribe-box .form-control:focus, .subscribe-box textarea:focus {
  border-color: #1F7A4D !important;
}
.loader {
  background: #F8F8F8 !important;
}
.dot-3 {
  background-color: #14213D !important;
}
.dot-2 {
  background-color: #FFB300 !important;
}
.dot-1 {
  background-color: #1F7A4D !important;
}

/* safety overrides for dark->light conversion */
/* ============================================================
   GlobalPiggy light theme = off-white base + NAVY feature bands.
   .bg-dark2 feature sections (mint/swap, security, design, ecosystem)
     -> solid Trust Navy; their white text STAYS white (readable, no flip).
   .bg-dark1 / .parallax / .about -> off-white; their white text -> navy.
   ============================================================ */
.btn-black{ background-color:#14213D !important; border-color:#14213D !important; }
.bg-dark{ background-color:#14213D !important; }

/* NAVY feature bands (drop dark photo, keep white text) */
.bg-dark2{ background-image:none !important; background-color:#14213D !important; }

/* LIGHT sections (drop dark photo) + flip their white text -> navy */
.bg-dark1, .about{ background-image:none !important; background-color:#FFFFFF !important; }
.parallax1, .parallax2{ background-image:none !important; background-color:#F8F8F8 !important; }
.bg-dark1 .color-white,.bg-dark1 .text-white,
.parallax1 .color-white,.parallax1 .text-white,
.parallax2 .color-white,.parallax2 .text-white,
.about ul li, .about .color-white{ color:#14213D !important; }
.about ul li:before{ color:#1F7A4D !important; }

/* security cards sit on a NAVY band -> keep light text + translucent-white glass */
.security-content h5{ color:#FFFFFF !important; }
.security-content p{ color:rgba(255,255,255,.78) !important; }
.security-box{ background-color:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.12) !important; }
.security-box:hover{ background-color:rgba(255,255,255,.1) !important; }

/* keep white text on brand-colored boxes (green/gold/navy) */
.bg-yellow .color-white,.bg-pink .color-white,.bg-blue .color-white,.bg-green .color-white,
.bg-yellow .text-white,.bg-pink .text-white,.bg-blue .text-white,.bg-green .text-white{ color:#FFFFFF !important; }

/* footer: slightly darker band (navy text on light-gray) */
footer.bg-dark2, footer.bg-black2, footer.p-half{ background-color:#E6EBE7 !important; background-image:none !important; }
footer .copyrights, footer .copyrights a, footer .color-white, footer .text-white{ color:#14213D !important; }
footer .footer-icons li a{ color:#1F7A4D !important; }
footer .copyrights a{ color:#1F7A4D !important; text-decoration:underline !important; }

/* hero (#home): off-white green gradient, navy captions */
#home, #home #rev_slider_8_1_wrapper, #home .tp-bgimg, #home .forcefullwidth_wrapper_tp_banner{
  background:linear-gradient(135deg,#E6F4EC 0%,#F8F8F8 60%) !important;
}
#home .rev-slidebg, #home .rs-background-video-layer{ opacity:0 !important; }
#home .tp-caption.color-white, #home .color-white, #home .tp-caption.color-white *{ color:#14213D !important; }
#home .tp-bannertimer{ background:rgba(20,33,61,.12) !important; }


/* footer link group (Source Code/Whitepaper/Research Paper/Privacy/Terms) was white -> invisible on light footer */
footer .footer-links-group a{ color:#14213D !important; }
footer .footer-links-group a:hover,
footer .footer-links-group a:focus{ color:#1F7A4D !important; }
footer .footer-links-group a i{ color:#1F7A4D !important; }

/* ---- navbar: light theme readability (links were white -> invisible on light) ---- */
.navbar-top-default .navbar-nav .nav-link,
.nav-three-circles .navbar-nav .nav-link,
.header-appear .navbar-nav .nav-link,
.header-appear .navbar-nav{ color:#14213D !important; }
.navbar-top-default .navbar-nav .nav-link:hover,
.nav-three-circles .navbar-nav .nav-link:hover,
.header-appear .navbar-nav .nav-link:hover{ color:#1F7A4D !important; }
/* scrolled navbar bar -> white with soft shadow (was dark #202020) */
.header-appear .navbar-top-default{ background:#FFFFFF !important; box-shadow:0 2px 12px rgba(20,33,61,.07) !important; }
/* GlobalPiggy CTA = solid green pill so its white text reads in every nav state */
.btn-setting{ background-color:#1F7A4D !important; color:#FFFFFF !important; border-radius:24px !important; padding:8px 18px !important; }
.btn-setting i, .btn-setting.color-white{ color:#FFFFFF !important; }
/* top hamburger lines -> navy on light */
.menu-bars-setting .menu-lines span{ background:#14213D !important; }

/* ============================================================
   LIGHT sections: template defaults section titles/subheadings/quotes to
   WHITE (.main-title h2, .sub-heading, .quote ...). Force them navy so they
   are visible on the off-white background. NAVY (.bg-dark2) sections are NOT
   listed here, so their white titles stay white. Buttons/nav handled elsewhere.
   ============================================================ */
.bg-dark1 .main-title h2, .bg-dark1 .main-title h5, .bg-dark1 .main-title.style-two p, .bg-dark1 .quote,
.bg-dark1 h2, .bg-dark1 h3, .bg-dark1 h4, .bg-dark1 h5,
.about .main-title h2, .about .main-title h5, .about .quote, .about h2, .about h3, .about h4, .about h5,
.parallax1 .main-title h2, .parallax1 .main-title h5, .parallax1 .quote, .parallax1 h2, .parallax1 h3, .parallax1 h4,
.parallax2 .main-title h2, .parallax2 .quote,
#home .main-title h2, #home .quote, #home h2, #home h3{ color:#14213D !important; }
/* subheadings: slightly muted navy */
.bg-dark1 .sub-heading, .about .sub-heading, .parallax1 .sub-heading, #home .sub-heading{ color:rgba(20,33,61,.72) !important; }

/* ---- light-section social icons + contact form (were white -> invisible on light) ---- */
#home .slider-social a, .slider-social.banner-social a,
.bg-dark1 .address-social a, .bg-dark1 .slider-social a{ color:#14213D !important; }
#home .slider-social a:hover, .bg-dark1 .address-social a:hover,
.bg-dark1 .slider-social a:hover{ color:#1F7A4D !important; }
.bg-dark1 .contact-form-textfield input, .bg-dark1 .contact-form-textfield textarea{ color:#14213D !important; }
.bg-dark1 .contact-form-textfield input::placeholder,
.bg-dark1 .contact-form-textfield textarea::placeholder{ color:rgba(20,33,61,.5) !important; }

/* ============================================================
   HERO: restore the original rich IMAGE + slider animation.
   (The earlier flat light-gradient hero was too plain.) The dark photo
   returns with its layer animations; captions go back to white. The rest of
   the page stays light (navy bands + off-white) — only #home is image-rich.
   These rules are last, so they override the earlier flat-hero block.
   ============================================================ */
#home, #home #rev_slider_8_1_wrapper, #home .tp-bgimg, #home .forcefullwidth_wrapper_tp_banner{
  background:transparent !important;        /* let the slide photo show */
}
#home .rev-slidebg, #home .rs-background-video-layer{ opacity:1 !important; }   /* photo + animation back */
/* captions sit on the photo -> white again (revert the navy flips) */
#home .tp-caption.color-white, #home .color-white, #home .tp-caption.color-white *,
#home .main-title h2, #home .quote, #home h2, #home h3{ color:#FFFFFF !important; }
#home .sub-heading{ color:rgba(255,255,255,.88) !important; }
#home .slider-social a, .slider-social.banner-social a{ color:#FFFFFF !important; }
#home .tp-bannertimer{ background:rgba(255,255,255,.25) !important; }

/* ============================================================
   NESTED NAVY boxes: a .bg-dark2 card can sit INSIDE a light .bg-dark1
   section (e.g. the contact-box). The light-section flips above would turn
   its text navy -> invisible on navy. Re-assert WHITE text for any .bg-dark2
   content. Placed last so it wins (equal specificity -> later rule).
   ============================================================ */
.bg-dark2 .color-white, .bg-dark2 .text-white,
.bg-dark2 .main-title h2, .bg-dark2 .main-title h5, .bg-dark2 .sub-heading,
.bg-dark2 h2, .bg-dark2 h3, .bg-dark2 h4, .bg-dark2 h5,
.contact-box, .contact-box p, .contact-box a{ color:#FFFFFF !important; }
.bg-dark2 .sub-heading{ color:rgba(255,255,255,.82) !important; }

/* ============================================================
   v1/v2 REVEAL CONTROL (globalpiggy)
   Tier via <html data-tier>. Crypto content (NUSD/NDJI/mint/swap/wallet) is
   GlobalPiggy-v2 -> tagged data-reveal-min="v2", hidden in v1. v1 = non-crypto
   GEM piggy-bank / identity / reputation (content created in step B).
   ============================================================ */
[data-reveal-min="v2"]{ display:none !important; }
html[data-tier="v2"] [data-reveal-min="v2"]{ display:revert !important; }

/* ============================================================
   v1 CONTENT — new light hero + sections (override leftover dark-hero #home rules)
   ============================================================ */
.v1-hero{ background:linear-gradient(135deg,#E6F4EC 0%,#F8F8F8 60%) !important; padding:130px 0 80px !important; }
.v1-hero .main-title h2{ color:#14213D !important; font-weight:300; }
.v1-hero .main-title h2 .color-pink{ color:#1F7A4D !important; font-weight:600; }
.v1-hero .sub-heading{ color:rgba(20,33,61,.72) !important; }
.v1-hero-media{ max-width:100%; border-radius:24px; box-shadow:0 20px 60px rgba(20,33,61,.12); }
.v1-card-img{ max-height:220px; width:auto; }
/* brand the primary button green (v1 CTAs) */
.btn-primary{ background-color:#1F7A4D !important; border-color:#1F7A4D !important; color:#fff !important; }
.btn-primary:hover,.btn-primary:focus{ background-color:#14633E !important; border-color:#14633E !important; }
/* v1 section icons -> gold accent */
.bg-dark1 .fa-piggy-bank,.bg-dark1 .fa-shield-alt,.bg-dark1 .fa-user-shield{ color:#FFB300 !important; }

/* ============================================================
   GEM visual identity (unify GEM = blue diamond #536DFE)
   App renders GEM as Icon(Icons.diamond, color: Colors.indigoAccent ~ #536DFE).
   Canonical GEM color across app + both webs = #536DFE (a blue DIAMOND, not a coin).
   Coin Gold #FFB300 is the general site ACCENT only — it is NOT the GEM color.
   .gem-mark = any inline gem/diamond glyph on a light/neutral background.
   The v2 "Mint" feature-card fa-gem stays white on its navy card (trio contrast) by design.
   ============================================================ */
:root{ --gem-blue:#536DFE; }
.gem-mark, i.gem-mark, .fa-gem.gem-mark{ color:var(--gem-blue) !important; }

/* ============================================================
   v1 visuals from existing assets (2026-07-04)
   hero mascot + icon tiles + inline SVG hub + diagram/phone cards
   ============================================================ */
.v1-hero-visual{ position:relative; display:inline-block; padding:48px 56px; }
.v1-hero-visual::before{ content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(31,122,77,.16), rgba(31,122,77,.03) 72%); }
.v1-hero-mascot{ width:300px; max-width:66vw; position:relative;
  animation:v1float 5s ease-in-out infinite; filter:drop-shadow(0 26px 42px rgba(20,33,61,.20)); }
.v1-float-gem{ position:absolute; color:#536DFE; opacity:.92; animation:v1float 4.2s ease-in-out infinite; }
.v1-float-gem.g1{ top:10%; left:6%;   font-size:30px; animation-delay:.3s; }
.v1-float-gem.g2{ top:22%; right:5%;  font-size:20px; animation-delay:1.2s; }
.v1-float-gem.g3{ bottom:12%; left:15%; font-size:24px; animation-delay:2s; }
@keyframes v1float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }

.v1-card-icon{ width:96px; height:96px; border-radius:28px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#E6F4EC,#ffffff); box-shadow:0 10px 26px rgba(20,33,61,.10); }
.v1-card-icon i{ font-size:38px; color:#1F7A4D; }
.v1-card-icon.gold i{ color:#FFB300; }
.v1-card-icon.blue i{ color:#536DFE; }

.v1-hub-svg{ width:100%; max-width:430px; height:auto; }
.v1-diagram-card{ background:#fff; border-radius:20px; padding:18px;
  box-shadow:0 16px 44px rgba(20,33,61,.22); display:inline-block; }
.v1-diagram-card img{ max-width:100%; border-radius:12px; }
.v1-phone-img{ max-height:440px; width:auto; filter:drop-shadow(0 20px 44px rgba(0,0,0,.35)); }
@media (max-width:767px){
  .v1-hero-mascot{ width:210px; }
  .v1-phone-img{ max-height:340px; }
}

/* fix: the dark-theme "#home ..." group outranks .v1-hero (ID specificity)
   and painted the light v1 hero text white; re-assert with #home.v1-hero */
#home.v1-hero .main-title h2{ color:#14213D !important; }
#home.v1-hero .main-title h2 .color-pink{ color:#1F7A4D !important; }
#home.v1-hero .sub-heading, #home.v1-hero p{ color:rgba(20,33,61,.72) !important; }