*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

:root{
  --bg:#fff8fb;
  --bg2:#fffdfd;

  --glass:rgba(255,255,255,.58);
  --glass-strong:rgba(255,255,255,.76);

  --line:rgba(255,255,255,.82);
  --line-dark:rgba(213,167,184,.28);

  --text:#242027;
  --muted:#817681;

  --gold:#d79b24;
  --gold2:#f1c967;
  --gold3:#fff0bd;

  --pink:#f7bfd4;
  --pink2:#f3a8c5;

  --indigo:#9b8cff;
  --cyan:#83d9e8;

  --success:#36b87a;
  --danger:#e56b78;

  --radius:27px;
  --shadow:
    0 24px 70px rgba(154,105,126,.14),
    0 5px 18px rgba(154,105,126,.08);
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;
  color:var(--text);

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Segoe UI",
    Roboto,
    sans-serif;

  background:
    radial-gradient(
      600px 420px at 5% -5%,
      rgba(255,206,225,.75),
      transparent 68%
    ),
    radial-gradient(
      520px 380px at 100% 12%,
      rgba(255,224,167,.48),
      transparent 70%
    ),
    radial-gradient(
      650px 500px at 70% 100%,
      rgba(180,216,255,.26),
      transparent 72%
    ),
    linear-gradient(
      145deg,
      #fff8fb,
      #fffdfd 48%,
      #fff8fb
    );

  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.22;

  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}

/* =========================================
   AMBIENT LIGHT
========================================= */

.ambient{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.orb{
  position:absolute;
  border-radius:999px;
  filter:blur(75px);
  opacity:.55;
  will-change:transform;
}

.orb.one{
  width:280px;
  height:280px;
  left:-110px;
  top:90px;
  background:rgba(247,191,212,.65);
}

.orb.two{
  width:240px;
  height:240px;
  right:-100px;
  top:35%;
  background:rgba(247,205,111,.42);
}

.orb.three{
  width:260px;
  height:260px;
  left:35%;
  bottom:-150px;
  background:rgba(133,211,231,.25);
}

/* =========================================
   TOPBAR
========================================= */

.topbar-wrap{
  position:sticky;
  top:0;
  z-index:100;
  padding:
    max(10px, env(safe-area-inset-top))
    14px
    8px;
}

.topbar{
  max-width:760px;
  margin:auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  padding:10px 12px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.78),
      rgba(255,255,255,.48)
    );

  border:1px solid rgba(255,255,255,.88);
  border-radius:22px;

  backdrop-filter:
    blur(25px)
    saturate(180%);

  -webkit-backdrop-filter:
    blur(25px)
    saturate(180%);

  box-shadow:
    0 12px 45px rgba(155,107,128,.10),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand-logo{
  width:38px;
  height:38px;
  border-radius:13px;
  object-fit:cover;

  border:1px solid rgba(215,155,36,.28);

  box-shadow:
    0 6px 18px rgba(215,155,36,.18),
    inset 0 1px 0 white;
}

.brand-text{
  min-width:0;
}

.brand-name{
  font-size:14px;
  font-weight:900;
  letter-spacing:.12em;

  background:
    linear-gradient(
      100deg,
      #9d6911,
      #f2c45e,
      #b87b15,
      #e4b34d
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.brand-sub{
  display:block;
  font-size:9px;
  color:#9c8e98;
  letter-spacing:.08em;
  margin-top:1px;
}

.nav{
  display:flex;
  align-items:center;
  gap:5px;
}

.nav button{
  appearance:none;
  border:0;
  background:transparent;

  padding:9px 11px;
  border-radius:13px;

  font:inherit;
  font-size:11px;
  font-weight:800;

  color:#7f7079;
  cursor:pointer;

  transition:.25s ease;
}

.nav button:hover,
.nav button:active{
  background:rgba(247,191,212,.23);
  color:#9a657d;
}

.nav .donate-nav{
  color:#a97518;
  background:rgba(245,201,103,.15);
  border:1px solid rgba(215,155,36,.16);
}

/* =========================================
   MAIN
========================================= */

.page{
  position:relative;
  z-index:2;

  max-width:760px;
  margin:auto;

  padding:
    28px
    18px
    calc(90px + env(safe-area-inset-bottom));
}

/* =========================================
   HERO
========================================= */

.hero{
  text-align:center;
  padding:35px 0 30px;
}

.hero-logo{
  width:88px;
  height:88px;
  border-radius:27px;
  object-fit:cover;

  display:block;
  margin:0 auto 19px;

  border:1px solid rgba(255,255,255,.92);

  box-shadow:
    0 20px 55px rgba(179,115,139,.18),
    0 0 0 6px rgba(255,255,255,.34),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.premium-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;

  padding:7px 13px;

  border-radius:999px;

  color:#9b6a15;
  font-size:10px;
  font-weight:900;
  letter-spacing:.14em;

  background:
    linear-gradient(
      135deg,
      rgba(255,239,189,.72),
      rgba(255,255,255,.68)
    );

  border:1px solid rgba(215,155,36,.22);

  box-shadow:
    inset 0 1px 0 white,
    0 8px 25px rgba(215,155,36,.08);
}

.premium-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d8a332;
  box-shadow:0 0 10px rgba(216,163,50,.7);
}

.hero h1{
  margin:17px 0 8px;

  font-size:
    clamp(40px, 11vw, 68px);

  line-height:.95;
  letter-spacing:-.065em;
  font-weight:900;
}

.gold-text{
  background:
    linear-gradient(
      105deg,
      #9c6810 0%,
      #e9b94f 24%,
      #fff1bc 45%,
      #d69a28 62%,
      #9d6910 100%
    );

  background-size:220% auto;

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  animation:goldFlow 5s linear infinite;
}

@keyframes goldFlow{
  to{
    background-position:220% center;
  }
}

.hero-description{
  max-width:530px;
  margin:0 auto;

  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}

.client-indicator{
  margin:17px auto 0;

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:7px 12px;

  border-radius:999px;

  background:rgba(255,255,255,.48);
  border:1px solid rgba(255,255,255,.86);

  color:#887982;
  font-size:11px;
  font-weight:700;

  box-shadow:
    inset 0 1px 0 white,
    0 7px 25px rgba(170,117,139,.07);
}

.client-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#36b87a;
  box-shadow:0 0 12px rgba(54,184,122,.5);
}

/* =========================================
   PROGRESS
========================================= */

.progress-shell{
  margin:8px 0 18px;

  padding:15px 16px;

  background:rgba(255,255,255,.48);
  border:1px solid rgba(255,255,255,.86);

  border-radius:20px;

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);

  box-shadow:
    inset 0 1px 0 white,
    0 12px 35px rgba(170,117,139,.07);
}

.progress-top{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:9px;

  font-size:10px;
  font-weight:800;
  color:#988a92;
  letter-spacing:.06em;
}

.progress-top strong{
  color:#a77820;
}

.progress{
  display:flex;
  gap:5px;
}

.progress span{
  flex:1;
  height:5px;
  border-radius:99px;

  background:rgba(217,199,207,.48);

  overflow:hidden;
  position:relative;
}

.progress span::after{
  content:"";
  position:absolute;
  inset:0;

  transform:translateX(-102%);

  background:
    linear-gradient(
      90deg,
      #d99b29,
      #f4cf72,
      #fff1c1
    );

  transition:transform .6s cubic-bezier(.16,1,.3,1);
}

.progress span.active::after{
  transform:translateX(0);
}

/* =========================================
   GLASS CARD
========================================= */

.glass{
  position:relative;
  overflow:hidden;

  margin-bottom:15px;
  padding:20px;

  border-radius:var(--radius);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.76),
      rgba(255,255,255,.43)
    );

  border:1px solid rgba(255,255,255,.86);

  backdrop-filter:
    blur(26px)
    saturate(175%);

  -webkit-backdrop-filter:
    blur(26px)
    saturate(175%);

  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -1px 0 rgba(255,255,255,.25);
}

.glass::before{
  content:"";

  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,.5),
      transparent 25%,
      transparent 72%,
      rgba(255,255,255,.22)
    );

  opacity:.7;
}

.glass > *{
  position:relative;
  z-index:1;
}

/* =========================================
   SECTION HEADER
========================================= */

.section-head{
  display:flex;
  align-items:flex-start;
  gap:12px;

  margin-bottom:14px;
}

.step-number{
  width:38px;
  height:38px;

  flex:0 0 38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:13px;

  color:#9d701f;
  font-size:12px;
  font-weight:900;

  background:
    linear-gradient(
      145deg,
      rgba(255,242,199,.82),
      rgba(255,255,255,.58)
    );

  border:1px solid rgba(215,155,36,.2);

  box-shadow:
    inset 0 1px 0 white,
    0 7px 20px rgba(215,155,36,.09);
}

.section-title{
  margin:0;

  font-size:16px;
  line-height:1.2;
  font-weight:850;
}

.section-subtitle{
  margin:5px 0 0;

  color:#9b8c95;
  font-size:11.5px;
}

/* =========================================
   DROP ZONE
========================================= */

.drop{
  display:flex;
  align-items:center;
  gap:13px;

  padding:16px;

  border-radius:19px;

  border:1.5px dashed rgba(204,169,185,.58);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.45),
      rgba(255,239,246,.28)
    );

  cursor:pointer;

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

.drop:hover{
  border-color:rgba(215,155,36,.55);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.65),
      rgba(255,232,243,.45)
    );

  box-shadow:
    0 12px 30px rgba(171,113,137,.08);
}

.drop:active{
  transform:scale(.985);
}

.drop-icon{
  width:46px;
  height:46px;

  flex:0 0 46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:15px;

  color:#a88d98;

  background:rgba(255,255,255,.65);

  border:1px solid rgba(255,255,255,.9);

  box-shadow:
    inset 0 1px 0 white,
    0 7px 18px rgba(150,106,125,.08);
}

.drop-icon svg{
  width:22px;
  height:22px;
}

.drop-main{
  min-width:0;
}

.drop-title{
  display:block;

  font-size:13px;
  font-weight:800;

  color:#5e5159;
}

.drop-sub{
  display:block;

  margin-top:3px;

  color:#a4959d;
  font-size:10.5px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.drop input{
  display:none;
}

/* SUCCESS */

.card-done .drop{
  border-style:solid;

  border-color:rgba(54,184,122,.38);

  background:
    linear-gradient(
      135deg,
      rgba(235,255,246,.7),
      rgba(255,255,255,.5)
    );

  box-shadow:
    0 12px 35px rgba(54,184,122,.08),
    inset 0 1px 0 white;
}

.card-done .drop-icon{
  color:var(--success);
  background:rgba(54,184,122,.08);
  border-color:rgba(54,184,122,.18);
}

.card-done .drop-title{
  color:#347e60;
}

/* =========================================
   BUILD WORKSPACE
========================================= */

.build-card{
  padding:22px;
}

.build-status{
  min-height:21px;

  margin:13px 0 0;

  text-align:center;

  color:#978993;
  font-size:12px;
}

.build-status.success{
  color:var(--success);
}

.build-status.error{
  color:var(--danger);
}

.primary-button,
.download-button{
  appearance:none;

  width:100%;

  min-height:57px;

  border:0;
  border-radius:18px;

  cursor:pointer;

  font:inherit;
  font-size:15px;
  font-weight:900;

  position:relative;
  overflow:hidden;

  transition:
    transform .2s ease,
    box-shadow .25s ease,
    opacity .25s ease;
}

.primary-button{
  color:#493208;

  background:
    linear-gradient(
      110deg,
      #ffe5a0,
      #eab34b,
      #fff0b9,
      #d99720
    );

  background-size:240% auto;

  box-shadow:
    0 15px 38px rgba(211,151,32,.22),
    inset 0 1px 0 rgba(255,255,255,.9);

  animation:buttonGold 4s linear infinite;
}

@keyframes buttonGold{
  to{
    background-position:240% center;
  }
}

.primary-button::after,
.download-button::after{
  content:"";

  position:absolute;

  top:-20%;
  bottom:-20%;
  left:-60%;

  width:35%;

  transform:skewX(-18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.68),
      transparent
    );

  animation:sheen 3.5s ease-in-out infinite;
}

@keyframes sheen{
  0%,55%{left:-60%}
  100%{left:140%}
}

.primary-button:hover:not(:disabled),
.download-button:hover{
  transform:translateY(-2px);

  box-shadow:
    0 20px 45px rgba(211,151,32,.28),
    inset 0 1px 0 white;
}

.primary-button:active,
.download-button:active{
  transform:scale(.98);
}

.primary-button:disabled{
  opacity:.42;
  cursor:not-allowed;
  animation:none;
  box-shadow:none;
}

.download-button{
  display:none;
  margin-top:10px;

  color:white;

  background:
    linear-gradient(
      135deg,
      #54c98c,
      #2eaa70
    );

  box-shadow:
    0 15px 35px rgba(46,170,112,.2);
}

.download-button.show{
  display:block;
}

/* =========================================
   LOADER
========================================= */

.loader{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.loader-ring{
  width:16px;
  height:16px;

  border-radius:50%;

  border:2px solid rgba(73,50,8,.22);
  border-top-color:#493208;

  animation:spin .7s linear infinite;
}

@keyframes spin{
  to{
    transform:rotate(360deg);
  }
}

/* =========================================
   GUIDE
========================================= */

.guide-title{
  display:flex;
  align-items:center;
  gap:10px;

  margin-bottom:16px;
}

.guide-icon{
  width:38px;
  height:38px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:13px;

  color:#a87921;

  background:rgba(255,237,185,.5);

  border:1px solid rgba(215,155,36,.16);
}

.guide-icon svg{
  width:19px;
  height:19px;
}

.note{
  padding:13px 14px;

  border-radius:17px;

  background:
    linear-gradient(
      135deg,
      rgba(255,228,239,.62),
      rgba(255,245,211,.42)
    );

  border:1px solid rgba(236,180,204,.3);

  color:#79646f;

  font-size:12px;
  line-height:1.65;
}

.note strong{
  color:#9a6a1b;
}

.timeline{
  list-style:none;
  padding:0;
  margin:18px 0 0;
}

.timeline li{
  position:relative;

  padding:
    0
    0
    19px
    48px;

  color:#8c7d86;
  font-size:12.5px;
  line-height:1.65;
}

.timeline li:last-child{
  padding-bottom:0;
}

.timeline li::before{
  content:attr(data-step);

  position:absolute;

  left:0;
  top:0;

  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:11px;

  color:#9b701f;

  font-size:11px;
  font-weight:900;

  background:
    linear-gradient(
      145deg,
      rgba(255,241,194,.75),
      rgba(255,255,255,.58)
    );

  border:1px solid rgba(215,155,36,.17);

  box-shadow:
    inset 0 1px 0 white,
    0 6px 18px rgba(160,112,130,.06);
}

.timeline li::after{
  content:"";

  position:absolute;

  left:14.5px;
  top:34px;
  bottom:0;

  width:1px;

  background:
    linear-gradient(
      to bottom,
      rgba(215,155,36,.25),
      rgba(215,155,36,0)
    );
}

.timeline li:last-child::after{
  display:none;
}

.timeline b{
  color:#5c4e56;
}

.timeline code{
  padding:2px 6px;

  border-radius:7px;

  background:rgba(255,255,255,.56);
  border:1px solid rgba(219,202,209,.45);

  color:#76656e;
  font-size:10.5px;
}

/* =========================================
   SCREENSHOT
========================================= */

.shot{
  display:block;
  margin-top:10px;
}

.shot img{
  display:block;
  width:100%;

  border-radius:18px;

  border:1px solid rgba(255,255,255,.9);

  box-shadow:
    0 15px 35px rgba(141,98,117,.11);
}

/* =========================================
   DONATE CARD
========================================= */

.donate-card{
  cursor:pointer;
}

.donate-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.donate-left{
  display:flex;
  align-items:center;
  gap:12px;
}

.donate-icon{
  width:44px;
  height:44px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:15px;

  color:#aa7415;

  background:
    linear-gradient(
      145deg,
      rgba(255,238,182,.75),
      rgba(255,255,255,.65)
    );

  border:1px solid rgba(215,155,36,.17);
}

.donate-icon svg{
  width:21px;
  height:21px;
}

.donate-name{
  font-size:14px;
  font-weight:850;
}

.donate-desc{
  margin-top:3px;

  color:#9b8c95;
  font-size:10.5px;
}

.chevron{
  width:30px;
  height:30px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  border:1px solid rgba(215,155,36,.2);

  color:#b17c20;

  transition:transform .3s ease;
}

.chevron svg{
  width:16px;
  height:16px;
}

.donate-card.open .chevron{
  transform:rotate(180deg);
}

.donate-content{
  display:none;

  margin-top:18px;

  padding-top:18px;

  border-top:1px solid rgba(219,197,207,.45);

  text-align:center;
}

.donate-card.open .donate-content{
  display:block;
}

.qr{
  width:min(290px,100%);

  display:block;

  margin:0 auto;

  border-radius:23px;

  border:1px solid rgba(255,255,255,.9);

  box-shadow:
    0 20px 45px rgba(180,119,145,.14);

  animation:qrFloat 3s ease-in-out infinite;
}

@keyframes qrFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

.bank-info{
  margin-top:14px;

  padding:14px;

  border-radius:17px;

  background:rgba(255,255,255,.43);

  border:1px solid rgba(255,255,255,.8);
}

.bank-info strong{
  display:block;

  color:#8e641b;
  font-size:14px;
}

.bank-info span{
  display:block;

  margin-top:3px;

  color:#95858e;
  font-size:11px;
}

/* =========================================
   YOUNJ INTRO
========================================= */

.about{
  text-align:center;
}

.about-logo{
  width:55px;
  height:55px;

  border-radius:18px;

  object-fit:cover;

  border:1px solid rgba(255,255,255,.9);

  box-shadow:
    0 10px 28px rgba(170,117,139,.12);
}

.about h2{
  margin:12px 0 6px;

  font-size:20px;
  letter-spacing:-.035em;
}

.about h2 span{
  color:#c18a22;
}

.about p{
  max-width:560px;

  margin:0 auto;

  color:#94848d;
  font-size:12px;
  line-height:1.75;
}

.about-tag{
  display:inline-flex;

  margin-top:13px;
  padding:7px 11px;

  border-radius:999px;

  color:#a27629;

  font-size:9px;
  font-weight:900;
  letter-spacing:.1em;

  background:rgba(255,236,185,.4);
  border:1px solid rgba(215,155,36,.14);
}

/* =========================================
   VISITOR COUNTER
========================================= */

.counter{
  margin-top:18px;

  display:inline-flex;
  align-items:center;
  gap:8px;

  padding:8px 13px;

  border-radius:999px;

  background:rgba(255,255,255,.52);

  border:1px solid rgba(255,255,255,.88);

  box-shadow:
    inset 0 1px 0 white,
    0 8px 25px rgba(160,112,130,.07);
}

.counter-dot{
  width:6px;
  height:6px;

  border-radius:50%;

  background:#36b87a;

  box-shadow:
    0 0 9px rgba(54,184,122,.55);
}

.counter-label{
  color:#988992;
  font-size:10px;
  font-weight:700;
}

.odometer{
  min-width:50px;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  color:#9e701f;

  font-size:12px;
  font-weight:900;

  font-variant-numeric:tabular-nums;

  text-align:right;
}

/* =========================================
   FOOTER
========================================= */

.footer{
  text-align:center;

  margin-top:22px;

  color:#aa9ba3;

  font-size:10px;
  line-height:1.7;
}

.footer strong{
  color:#9a6d1c;
}

/* =========================================
   CONTACT FLOATING BUTTON
========================================= */

.contact-fab{
  position:fixed;

  right:17px;
  bottom:
    calc(18px + env(safe-area-inset-bottom));

  z-index:110;

  width:55px;
  height:55px;

  border:1px solid rgba(255,255,255,.9);

  border-radius:50%;

  overflow:hidden;

  cursor:pointer;

  background:rgba(255,255,255,.7);

  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  box-shadow:
    0 16px 38px rgba(150,101,122,.18),
    inset 0 1px 0 white;
}

.contact-fab img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.contact-fab::after{
  content:"";

  position:absolute;
  inset:0;

  border-radius:50%;

  box-shadow:
    inset 0 0 0 1px rgba(215,155,36,.25);
}

/* =========================================
   MODALS
========================================= */

.modal{
  position:fixed;
  inset:0;

  z-index:300;

  display:none;
  align-items:center;
  justify-content:center;

  padding:
    20px
    18px
    calc(20px + env(safe-area-inset-bottom));

  background:rgba(58,39,49,.20);

  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}

.modal.show{
  display:flex;
}

.modal-box{
  width:min(470px,100%);

  max-height:
    calc(100vh - 40px);

  overflow:auto;

  border-radius:30px;

  padding:23px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.88),
      rgba(255,245,249,.72)
    );

  border:1px solid rgba(255,255,255,.94);

  box-shadow:
    0 35px 100px rgba(101,68,83,.23),
    inset 0 1px 0 white;

  backdrop-filter:
    blur(35px)
    saturate(180%);

  -webkit-backdrop-filter:
    blur(35px)
    saturate(180%);
}

.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.modal-title{
  margin:0;

  font-size:20px;
  letter-spacing:-.035em;
}

.close{
  width:34px;
  height:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:1px solid rgba(210,191,200,.42);

  border-radius:50%;

  background:rgba(255,255,255,.55);

  color:#8f7c86;

  cursor:pointer;
}

.close svg{
  width:17px;
  height:17px;
}

.modal-desc{
  margin:8px 0 17px;

  color:#96868f;
  font-size:12px;
  line-height:1.7;
}

/* =========================================
   CONTACT LINKS
========================================= */

.contact-list{
  display:grid;
  gap:9px;
}

.contact-item{
  display:flex;
  align-items:center;
  gap:12px;

  padding:13px;

  border-radius:17px;

  text-decoration:none;

  color:#61535c;

  background:rgba(255,255,255,.45);

  border:1px solid rgba(255,255,255,.78);

  transition:.25s ease;
}

.contact-item:hover{
  transform:translateY(-2px);

  background:rgba(255,255,255,.7);
}

.contact-item-icon{
  width:39px;
  height:39px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:13px;

  background:
    linear-gradient(
      145deg,
      rgba(255,232,242,.8),
      rgba(255,255,255,.6)
    );

  border:1px solid rgba(255,255,255,.9);
}

.contact-item-icon svg{
  width:19px;
  height:19px;
}

.contact-item strong{
  display:block;

  font-size:12px;
}

.contact-item small{
  display:block;

  margin-top:2px;

  color:#a1929a;
  font-size:10px;
}

/* =========================================
   INTRO POPUP
========================================= */

.intro-brand{
  text-align:center;
}

.intro-brand img{
  width:70px;
  height:70px;

  border-radius:22px;

  object-fit:cover;

  border:1px solid rgba(255,255,255,.9);

  box-shadow:
    0 15px 40px rgba(169,111,135,.14);
}

.intro-brand h2{
  margin:13px 0 5px;

  font-size:25px;
  letter-spacing:-.05em;
}

.intro-brand h2 span{
  background:
    linear-gradient(
      100deg,
      #9b6812,
      #e9b951,
      #b97b18
    );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.intro-brand p{
  margin:0;

  color:#96868f;

  font-size:12px;
  line-height:1.7;
}

.intro-features{
  display:grid;
  grid-template-columns:repeat(3,1fr);

  gap:8px;

  margin:19px 0;
}

.intro-feature{
  padding:12px 7px;

  text-align:center;

  border-radius:16px;

  background:rgba(255,255,255,.43);

  border:1px solid rgba(255,255,255,.76);
}

.intro-feature strong{
  display:block;

  font-size:11px;
  color:#715e67;
}

.intro-feature small{
  display:block;

  margin-top:3px;

  color:#a2939b;
  font-size:8.5px;
}

.enter-button{
  width:100%;

  min-height:51px;

  border:0;
  border-radius:17px;

  color:#493208;

  font:inherit;
  font-weight:900;
  font-size:13px;

  cursor:pointer;

  background:
    linear-gradient(
      110deg,
      #ffe5a0,
      #e7b34d,
      #fff0bb
    );

  box-shadow:
    0 14px 32px rgba(215,155,36,.2);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:520px){

  .page{
    padding-left:14px;
    padding-right:14px;
    padding-top:18px;
  }

  .topbar{
    border-radius:20px;
  }

  .nav button{
    padding:8px 8px;
  }

  .nav button:not(.donate-nav){
    display:none;
  }

  .hero{
    padding-top:25px;
  }

  .hero-logo{
    width:78px;
    height:78px;
    border-radius:23px;
  }

  .glass{
    padding:17px;
    border-radius:23px;
  }

  .build-card{
    padding:18px;
  }

  .intro-features{
    gap:6px;
  }

  .contact-fab{
    width:52px;
    height:52px;
    right:14px;
  }
}

/* =========================================
   REDUCED MOTION
========================================= */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
/* =========================================
   TOAST NOTIFICATION
========================================= */

.toast-container {
  position: fixed;
  top: calc(20px + env(safe-area-inset-top));
  right: 16px;
  z-index: 400; /* cao hơn modal */
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none; /* không chặn tương tác phía sau */
  max-width: min(360px, calc(100vw - 32px));
}

.toast {
  pointer-events: auto; /* cho phép bấm vào toast nếu cần */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 12px 30px rgba(150, 100, 120, 0.15),
    inset 0 1px 0 white;
  font-size: 13px;
  font-weight: 700;
  color: #4a3f46;
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(54, 184, 122, 0.12);
  color: var(--success);
}

.toast-icon svg {
  width: 16px;
  height: 16px;
}

.toast.error .toast-icon {
  background: rgba(229, 107, 120, 0.12);
  color: var(--danger);
}

.toast-message {
  flex: 1;
  line-height: 1.4;
}

/* Animation tự ẩn (dùng JS để remove) */
.toast.hide {
  opacity: 0;
  transform: translateY(-10px) scale(0.97);
}